如何在Flex中嵌入字体[转]

这篇教程将告诉您如何在Flex中使用ActionScript,CSS,Flash CS3 来嵌入字体。

1.要注意约束性的使用嵌入字体技术，只是嵌入需要的字符，以此来减小文件体积。

2.设备字体（Device Fonts）运用在一些特殊设备，诸如电脑和移动掌上电脑上。当你在Flex程序中使用设备字体时，字体在编译时是通过名字提及(name reference)在用户的设备上保存该字体(store the font),而在应用程序运行时，应用程序则尝试在用户设备中定位该字体。(locate the font)

3.如果没有发现字体，它将会寻找一个最接近该字体的设备字体(it will make a best guess and select a font that it deems to be the closest match on the user's device.)

4.开发者会选择常用的字体来创建应用程序，他们知道那些字体对目标设备来说那是很常用的字体。 (Developers usually create their applications to target a limited number of fonts that they know are commonly available on the target device.)

5.举个例子，Times New Roman,Arial,Helvetica and Verdana 常被用与网站字体，因为它们在Windows和Mac系统中都很常用。当设备字体还未被嵌入在Flex应用程序中，它们是不会增加文件的尺寸的(Since device fonts are not compiled into the Flex application,they do not increase the file size of the deployed SWF.)

6.你不能确定你的应用程序会在用户电脑上完美的显示，因为某些字体无法被确认是否安装在用户的设备上，设备字体是无法运行在Flex的animations效果和effects效果和旋转效果下显示的。 <actionscript3>

<mx:Script>

       //字体将不会显示

<mx:Label text="testRotate" rotation="45"/> </mx:Script>

</actionscript3>

如果您是通过字体文件名或者系统字体名来嵌入字体的话，那么您只能嵌入TrueType类型字体。(If you embed a font by file name or system font name,you can only embed TrueType fonts.)

7.如果你在flex应用程序中使用Flash CS3导出的SWF文件来嵌入字体，你可以嵌入任何可以在Flash中使用的字体.(using adobe flash cs3 - any font available in Flash)如果在应用程序中嵌入字体，要注意它们会增加你的最终生成的SWF文件的大小。嵌入字体可以确保你的应用程序可以完全显示在客户的电脑上(displays properly)。嵌入字体同样可以显示于Flex animations效果中，它可以自动抗锯齿(anti-aliased)。抗锯齿技术可以平滑特定的尺寸(certain sizes)(这样效果更好)的字体，提高可读性。 (Anti-aliasing is a smoothing of the font characters to improve text readability at certain sizes.)

8.创建抗锯齿文本有多种算法,但最终的办法是使用字体颜色阴影(use shades of the fontcolor)平滑曲线(smooth curves)和弯曲角度(corners)(but ultimately the idea is to use shades of the font color to smooth curves and corners of the text)。对于字体的抗锯齿方法，要记住,所有的字体都使用是不必要的。抗锯齿技术不能运用于设备字体中(Anti-aliasing cannot be controlled in device fonts)。

9.像其它的网络资源一样(Like all assets),一些字体的使用需要受到许可限制. 不错的字体网站

创建嵌入字体步骤:

和嵌入图片用到的Embed元数据指令一样，嵌入字体也是同的指令。 1.首先,可以在主程序文件的前端创建MXML Script块,如下：

<actionscript3>

<mx:Script> <![CDATA] [Embed(source="需要嵌入的字体路径",

               fontName="起一个任意的名称",fontWeight="bold",

mimeType="application/x-font")] ]]> mx:Script>

//注意事项: /*在此键入[Embed()]元数据指令和它的source属性,可以使用相对或者绝对路径。 (针对本地计算机的TrueType字体文件),同时加上mimeType属性(声明嵌入的资源是一种字体) (embedded asset is a font)。

• /

/* 创建私有变量private var LogoFont:Class,(和嵌入图片资源一样)。您必须声明该变量。其次,要为该字体起一个名字(注意唯一性),设置fontName属性,使用它可以在应用程序的样式中引用到它。

• /

//应用时使用fontFamily样式(注意这不是属性), <mx:Label text="embedFontTest" fontFamily="和fontName的名字一样" fontWeight:"bold"/>

同样可以在MXML中的Style块中引用到该嵌入字体

<mx:Style> //添加一个自定义的(a custom class Selector),名字任意。

   .embedFont{
     fontFamily: 和嵌入字体的名字一样
     font-size:22pt;//设置字体大小
     color: #FFFFFF;//设置字体颜色

} </mx:Style>

//使用时指定styleName属性 <mx:Label text="testA" styleName="embedFont"/>

/* 如果加入了字体变粗样式(fontWeight),会发现没有显示(因为粗字体对于justus字体来说没有嵌入) 您需要在Embed指令中键入fontWeight后。如果是通过CSS来应用的话,需要在其中申明该样式。

• /

</actionscript3>

其它应用:在Flex中新建ActionScript项目:

在类中可以这样写:

<actionscript3>

//systemFont为系统字体名,unicodeRange的范围为数值范围

[Embed(systemFont="YaHei Consolas Hybrid", mimeType="application/x-font", unicodeRange="U+0030-U+0039")] private var demoFont:Class;

//私有变量demoFont作为初始化的参数应用在文本的defaultTextFormat属性中。

var pointTxt:TextField = new TextField(); pointTxt.defaultTextFormat = new TextFormat(new demoFont().fontName); pointTxt.text = String(POINTNUM);

</actionscript3>

 

嵌入字体因为可以指认system font name(系统字体名)，来替代它的TTF文件的路径。在windows系统中,你需要安装FontProperties 扩展程序来访问TTF文件的属性信息,

下载FontProperties

安装好后，选择字体，右键点击属性，选择FontFamily Name,这个就是系统字体名了。以此来为[Embed()]指令设置systemFont属性。

 

<actionscript3> <mx:Script> <![CDATA[ [Embed(systemFont="Justus",fontName="fontJustusRoman", mimeType="application/x-font")] ]]> </mx:Script> </actionscript3>

您可以约束嵌入到应用程序中的字符数目,使用unicodeRange属性(当你嵌入字体时)。在flex的安装目录中，找到flash-unicode-table.xml文件(frameworks文件夹),从中找到需要嵌入的字符的unicode值。

常用字符的unicode对照表 <actionscript3> <mx:Script> <![CDATA[

               //嵌入英语的小写字符
         

[Embed(systemFont="字体的系统字体名",mimeType="application/x-font",unicodeRange="U+0061-U+007A")] ]]> </mx:Script> </actionscript3> (This is a reference file that you can use to help you identify the unicode values for the language or character set you would like embedded.)

 

通过CSS样式来声明

2.您也可以完全不使用ActionScript，可以单纯使用CSS进行嵌入字体。就像ActionScript一样, 您可以通过字体的文件名或者是该字体的系统字体名。

You can entirely bypass ActionScript when embedding a font and use only CSS. Like in ActionScript , you can embed a font either by file name or system font name.

单纯使用CSS来嵌入字体的2中语法:

1.通过字体文件名来嵌入： <actionscript3> @font-face{

 src:url("C:/WINDOWS/Fonts/您希望嵌入的字体.ttf");

} </actionscript3>

2.通过系统字体名来嵌入 <actionscript3> @font-face{

 src:local("您希望嵌入字体的系统名");

} </actionscript3>

 

通过Flash CS3生成的SWF文件进行嵌入

打开flash,可以选择新建as3文档，也可以新建as2文档,在控制面板中选择动态文本，使用此项技术，你可以不受TrueType字体的限制,您可以嵌入任何可以在Flash CS3中使用的字体,包括PostScript和bitmap fonts。嵌入您所需的字体。通过发布设置导出。

<actionscript3> <mx:Style>

  @font-face{
   src:url("assets/您起的名字.swf");
   fontFamily:再次输入该字体在FlashCS3字体下拉列表中的名称。

} </mx:Style> </actionscript3>