标签:字体
在处理文本时,为了美观,有时会给文本选择一些特殊的字体,使得文本不那么单调,这就会引发一个问题:由于每个用户的系统有差异,当对方机器上没有安装你指定的字体时,Flash Player会自动选择一个合适的字体,无法保证文字的外观在控制之中,很可能会走样。如何避免出现这样的情况?
解决方法有两种:使用设备字体和使用嵌入字体。
设备字体的特性:
用户机器上的所有字体都最大可能地模拟其外观,保持文本的样式不会出现较大变化;嵌入字体是指将字体文件编译进SWF文件中或者运行时加载到SWF文件中,供SWF文件使用。这样不管用户是否安装了该字体,都可以正常显示。使用嵌入字体的好处还有:文本具有抗锯齿,边缘更平滑,文本可以设置透明度,文本还可以旋转。当然也有缺点,首先便是增加了程序的文件大小,而且嵌入字体只支持 TrueType(微软和Apple公司共同研制的字型标准)类型,当字体大小小于10时,文本会很难辨认。
一般情况下,使用设备字体就足够了,Flash Player支持三种设备字体:_sans,_serif,_typewriter。所以在定义样式时,为保证效果,可以这样:
-
Application{??
-
??
-
???fontSize:12;??
-
??
-
???fontFamily:?Arial,?"_sans";??
当用户的机器上没有Arial字体,Flash Player自动使用“_sans”设备字体。和系统字体的使用不同,设备字体必须用引号。?
嵌入字体
有些情况要求必须使用嵌入字体,例如使用了动画效果中的部分效果如Fade(淡入淡出效果)、Rotate(旋转效果),Dissolve(溶解效果)。可以在样式在定义嵌入字体:
-
<mx:Style>??
-
??
-
??@font-face?{??
-
??
-
?????????src:local("Arial");??//嵌入本机字体??
-
??
-
?????????fontFamily:?myFont;??//字体的别名??
-
??
-
?????????fontStyle:??normal;???//默认normal,正常,可选值:italic?|?oblique?|?normal??
-
??
-
?????????fontWeight:?normal;???//默认normal,正常,可选值:bold?|?heavy?|?normal??
-
??
-
?????????flashType:?true;????//默认true,添加文本的额外信息,使得文本抗锯齿,平滑显示??
-
??
-
???}??
-
??
-
???Application{??
-
??
-
????????fontSize:12;??
-
??
-
????????fontFamily:myFont;??//指定字体,使用嵌入字体的别名??
-
??
-
??}??
-
??
-
?</mx:Style>??
?在嵌入一些双字节型的字体,比如中文字体,日文字体时,字体信息复杂,字体文件大,为了减小程序的文件大小,可以对嵌入字体的字符范围进行限制,这样,没有使用的字符信息不会被包含在文件中。例如上面使用了英文字体,只能使用英文范围内的字符,如果使用了中文,将无法显示。
?在font-face中使用unicodeRange来指定字符范围,例如:
-
@font-face?{??
-
??
-
????????src:local("Arial");??
-
??
-
????????fontFamily:?myFont;??
-
??
-
????????flashType:?true;??
-
??
-
????????unicodeRange:??
-
??
-
???????????U+0041-U+005A,????
-
??
-
???????????U+0061-U+007A,????
-
??
-
???????????U+0030-U+0039,????
-
??
-
???????????U+002E-U+002E;????
-
??
-
?????}??
?必须使用字符的字符编码来定义字符范围,这里的字符编码采用Unicode(统一字符编码)标准。
?定义字符范围的另一种做法是在flex-config.xml中添加相关信息。用文本编辑器打开位于Flex Builder 2安装目录下的Flex SDK 2/frameworks/flex-config.xml文件,找到<fonts>标签。
?
-
<fonts>??
-
??
-
????<languages>??
-
??
-
????????<language-range>??
-
??
-
????????????<lang>englishRange</lang>??
-
??
-
????????????<range>U+0020-U+007E</range>??
-
??
-
????????</language-range>??
-
??
-
</fonts>??
按照以上格式添加字体的字符范围,在<lang>标签中设定标签的名称。这样,在程序中可以直接使用该名称来定义字符范围。例如:
-
@font-face?{??
-
??
-
????????src:local("Arial");??
-
??
-
????????fontFamily:?myFont;??
-
??
-
????????flashType:?true;??
-
??
-
????????unicodeRange:”?englishRange”??//等同于U+0020-U+007E??
-
??
-
?}??
?在flex-config.xml的同目录下还有一个flash-unicode-table.xml文件,其中列出了绝大部分语言的Unicode的字符范围,供开发者参考,其中也有中文的资料:
-
<language-range>??
-
??
-
??<lang>Chinese?(All)</lang>??
-
??
-
?<range>U+3000-U+303F,U+3105-U+312C,U+31A0-U+31BF,U+4E00-U+9FAF,U+FF01-U+FF60,U+F900-U+FAFF,U+201C-U+201D,U+2018-U+2019,U+2014,U+2026,U+FFE5,U+00B7</range>??
-
??
-
?</language-range>??
嵌入字体的另一种方式是把字体放在外部的swf中,然后加载swf文件。例如:
-
@font-face?{??
-
??
-
????????src:url("./Arial.swf");??//指定文件地址??
-
??
-
????????fontFamily:?“myFont”;???????
-
??
-
????}??
这里不能使用flashType属性,该属性的值由SWF文件决定,无法再更改。在使用该字体之前,必须保证SWF文件已经加载完毕。
?要在程序中使用该字体:
-
@font-face?{??
-
??
-
????????src:url("./Arial.swf");??
-
??
-
????????fontFamily:?“myFont”;???????
-
??
-
}??
-
??
-
.PlainText?{??
-
??
-
????????fontFamily:?"myFont?";??
-
??
-
????????fontSize:?12;??
-
??
-
??}??
-
??
-
??.BoldText?{??
-
??
-
????????fontFamily:?"myFont?";??
-
??
-
????????fontSize:?12;??
-
??
-
????????fontWeight:?bold;??
-
??
-
}??
注意:在使用嵌入字体时,即使是同一字体,它的不同样式比如斜体和粗体要单独进行定义,互相独立,不能混在一起。
使用脚本也可以嵌入字体:
-
[Embed(mimeType='application/x-font',?source='../assets/Arial.TTF',?fontName='myArialFont')]??
-
??
-
private?var?myFont:Class;??
定义样式:
-
.PlainText?{??
-
??
-
????????fontFamily:?myArialFont;??
-
??
-
????????fontSize:?12;??
-
??
-
?}??
如果嵌入的字体很大,生成的程序文件也会很大,导致加载时要花较长时间,要避免这个问题,可以把字体文件打包成SWF文件,然后加载到程序中。?
您希望在 Flex 应用程序中嵌入一种字体并将它用作基于文本的组件的样式。
下面的示例创建引用嵌入的字体的 font-family 名称的一个类选择器。 接着它会创建一个 Text 控件并将其样式设置为该类选择器。
提示: 您在嵌入字体以节省文件大小时仅可以从字体添加某些字符,方法是指定您的 @font-face 声明的 unicode-range 属性。
下面是一个使用实例:?
-
<?xml?version="1.0"?encoding="utf-8"?>??
-
<mx:Application???
-
????xmlns:mx="http://www.adobe.com/2006/mxml"???
-
????layout="horizontal"???
-
????horizontalAlign="center"???
-
????verticalAlign="center"???
-
????viewSourceURL="src/EmbeddingFonts/index.html"??
-
??
-
>??
-
??
-
????<mx:Style>??
-
????????@font-face???
-
????????{??
-
????????????font-family:?Copacetix;??
-
??
-
????????????src:?url("assets/copacetix.ttf");??
-
????????????unicode-range:??
-
????????????????U+0020-U+0040,?/*?Punctuation,?Numbers?*/??
-
??
-
????????????????U+0041-U+005A,?/*?Upper-Case?A-Z?*/??
-
????????????????U+005B-U+0060,?/*?Punctuation?and?Symbols?*/??
-
????????????????U+0061-U+007A,?/*?Lower-Case?a-z?*/??
-
????????????????U+007B-U+007E;?/*?Punctuation?and?Symbols?*/??
-
??
-
????????}??
-
??
-
????????.MyTextStyle???
-
????????{???
-
????????????font-family:?Copacetix;???
-
????????????font-size:?24pt;??????
-
????????}??
-
??
-
????</mx:Style>??
-
??
-
????<mx:Text?styleName="MyTextStyle"?text="Embedded?fonts?rock!"?width="100%"/>??
-
??????
-
??
-
</mx:Application>