Flex 样式和字体

Flex所支持的样式比Flash要丰富，样式定义的方法也很多。这也是Flex比Flash要强大、适合网页开发的地方之一。
样式定义类型
1. 外部样式表

Flex代码

1. <mx:Style source='/css/myStyle.css'/>

<mx:Style source='/css/myStyle.css'/> 

Flex会调用全局样式表global.css，该全局样式表由flex-config.xml定义，如：

Flex代码

1. <global-css-url>/WEB-INF/flex/global.css</global-css-url>

<global-css-url>/WEB-INF/flex/global.css</global-css-url> 

系统默认的样式表文件global.css文件其实没有任何样式定义，我们可以手动添加全局样式，也可以更改默认的全局样式文件路径。如，把全局样式文件该为：

Flex代码

1. <global-css-url>/css/styles.css</global-css-url>

<global-css-url>/css/styles.css</global-css-url> 

在这里顺便提一点，定义外部css文件的时候，颜色样式有四种定义方式：

Flex代码

1. .myclass { fillColor: #6666CC } // 16进制颜色格式
2. .myclass { borderColor: rgb(77%,22%,0%) } // RGB 颜色格式
3. .myclass { errorColor: rgb(0,255,0) } // 10进制RGB颜色格式
4. .myclass { color: Blue } // VGA 颜色名称格式

.myclass { fillColor: #6666CC } // 16进制颜色格式
.myclass { borderColor: rgb(77%,22%,0%) } // RGB 颜色格式
.myclass { errorColor: rgb(0,255,0) } // 10进制RGB颜色格式
.myclass { color: Blue } // VGA 颜色名称格式 

2.本地样式定义
使用<mx:Style>来定义当前文件的样式
下面的例子定义了myFontStyle子类样式，要使用对应的样式可以在组件中使用styleName属性来应用样式。

Flex代码

1. <mx:Style>
3. .myFontStyle { fontSize: 15 }
5. </mx:Style>
7. <mx:Button id='myButton' styleName='myFontStyle' label='Click Here' >

<mx:Style> 

.myFontStyle {  fontSize: 15  }

</mx:Style>

<mx:Button id='myButton' styleName='myFontStyle' label='Click Here' > 

下面的样式则定义了所有Button组件的样式，使用该方式定义的样式在使用的时候不需要指定样式名。

Flex代码

1. <mx:Style>
2. Button { fontSize: 15 }
3. </mx:Style>
5. <mx:Button id='myButton' label='Click Here' >

<mx:Style> 
Button {  fontSize: 15  }
</mx:Style>

<mx:Button id='myButton' label='Click Here' > 

3. 内嵌样式定义
对个别需要特殊处理的组件，可以使用下面的方式进行内嵌样式定义

Flex代码

1. <mx:Button id='myButton' fontSize='15' color='0x9966CC' label='My Button'/>

<mx:Button id='myButton' fontSize='15' color='0x9966CC' label='My Button'/> 

4. 使用脚本样式定义
这种方法使用了Flash传统的AS脚本方式来定义样式，具有更强大的灵活性，并且可以使用StyleManager类以及getStyle() 和 setStyle() 方法，如下所示：

Flex代码

1. <mx:Script>
2. <![CDATA[
4. //使用styleManger类
5. mx.styles.StyleManager.styles.ToolTip.fontWeight = 'bold';
6. //获取组件样式
7. lb1.text=ip1.getStyle('fontSize');
8. //设置组件样式
9. lb1.text=ip1.setStyle('fontSize',newSize);
11. ]]>
12. </mx:Script>

<mx:Script>
<![CDATA[

//使用styleManger类
mx.styles.StyleManager.styles.ToolTip.fontWeight = 'bold';
//获取组件样式
lb1.text=ip1.getStyle('fontSize');
//设置组件样式
lb1.text=ip1.setStyle('fontSize',newSize);
  
]]>
</mx:Script> 

如果三种样式定义方式同时使用的话，优先级别从高到低依次为：
内嵌式样式>本地样式定义(脚本样式定义)>外部样式定义

特殊样式定义
在进行样式定义的时候，我们需要注意几种Flex特殊的样式定义
1. 全局样式定义
对所有未被定义的控制组件应用global样式

Flex代码

1. global {
2. fontSize:22;
3. textDecoration: underline;
4. }

global {  
fontSize:22;
textDecoration: underline;
} 

2. 应用程序样式定义
Application标记是Flex的根标记，Application样式用来定义未被定义的容器以及子容器的样式

Flex代码

1. Application {
2. marginLeft: 0px;
3. marginRight: 0px;
4. marginTop: 0px;
5. marginBottom: 0px;
6. horizontalAlign: 'left';
7. }

Application {  
marginLeft: 0px;
marginRight: 0px;
marginTop: 0px;
marginBottom: 0px;
horizontalAlign: 'left';
}

关于字体的样式定义
1. 使用设备字体

Flex代码

1. .myClass {
2. fontFamily: Arial, Helvetica, '_sans';
3. color: Red;
4. fontSize: 22;
5. fontWeight: bold;
6. }

.myClass {  
fontFamily: Arial, Helvetica, '_sans';
color: Red;
fontSize: 22;
fontWeight: bold;
}

2. 使用移植字体

Flex代码

1. <mx:Style>
2. @font-face {
3. src:url('akbar.ttf');
4. fontFamily: myfont;
5. }
7. @font-face {
8. src:url('akbar.ttf');
9. fontWeight: bold;
10. fontFamily: myfontBold;
11. }
13. </mx:Style>

<mx:Style>
@font-face { 
src:url('akbar.ttf');
fontFamily: myfont;
}

@font-face { 
src:url('akbar.ttf');
fontWeight: bold;
fontFamily: myfontBold;
}

</mx:Style>

在定义了该字体样式后，就可以通过fontFamily来应用该字体样式，如：

Flex代码

1. Accordion {
2. fontFamily: myfont
3. }