flex中使用设备和嵌入字体

flex中使用设备和嵌入字体

-

标签:字体

在处理文本时，为了美观，有时会给文本选择一些特殊的字体，使得文本不那么单调，这就会引发一个问题：由于每个用户的系统有差异，当对方机器上没有安装你指定的字体时，Flash Player会自动选择一个合适的字体，无法保证文字的外观在控制之中，很可能会走样。如何避免出现这样的情况？

解决方法有两种：使用设备字体和使用嵌入字体。

设备字体的特性:

用户机器上的所有字体都最大可能地模拟其外观，保持文本的样式不会出现较大变化；嵌入字体是指将字体文件编译进SWF文件中或者运行时加载到SWF文件中，供SWF文件使用。这样不管用户是否安装了该字体，都可以正常显示。使用嵌入字体的好处还有：文本具有抗锯齿，边缘更平滑，文本可以设置透明度，文本还可以旋转。当然也有缺点，首先便是增加了程序的文件大小，而且嵌入字体只支持 TrueType（微软和Apple公司共同研制的字型标准）类型，当字体大小小于10时，文本会很难辨认。

一般情况下，使用设备字体就足够了，Flash Player支持三种设备字体：_sans，_serif，_typewriter。所以在定义样式时，为保证效果，可以这样：

  1. Application{  
  2.   
  3.    fontSize:12;  
  4.   
  5.    fontFamily: Arial, "_sans";  

当用户的机器上没有Arial字体，Flash Player自动使用“_sans”设备字体。和系统字体的使用不同，设备字体必须用引号。 

嵌入字体

有些情况要求必须使用嵌入字体，例如使用了动画效果中的部分效果如Fade（淡入淡出效果）、Rotate（旋转效果），Dissolve（溶解效果）。可以在样式在定义嵌入字体：

  1. <mx:Style>  
  2.   
  3.   @font-face {  
  4.   
  5.          src:local("Arial");  //嵌入本机字体  
  6.   
  7.          fontFamily: myFont;  //字体的别名  
  8.   
  9.          fontStyle:  normal;   //默认normal，正常，可选值：italic | oblique | normal  
  10.   
  11.          fontWeight: normal;   //默认normal，正常，可选值：bold | heavy | normal  
  12.   
  13.          flashType: true;    //默认true，添加文本的额外信息，使得文本抗锯齿，平滑显示  
  14.   
  15.    }  
  16.   
  17.    Application{  
  18.   
  19.         fontSize:12;  
  20.   
  21.         fontFamily:myFont;  //指定字体，使用嵌入字体的别名  
  22.   
  23.   }  
  24.   
  25.  </mx:Style>  

 在嵌入一些双字节型的字体，比如中文字体，日文字体时，字体信息复杂，字体文件大，为了减小程序的文件大小，可以对嵌入字体的字符范围进行限制，这样，没有使用的字符信息不会被包含在文件中。例如上面使用了英文字体，只能使用英文范围内的字符，如果使用了中文，将无法显示。

 在font-face中使用unicodeRange来指定字符范围，例如：

  1. @font-face {  
  2.   
  3.         src:local("Arial");  
  4.   
  5.         fontFamily: myFont;  
  6.   
  7.         flashType: true;  
  8.   
  9.         unicodeRange:  
  10.   
  11.            U+0041-U+005A,  /* 大写字母 [A..Z] */  
  12.   
  13.            U+0061-U+007A,  /* 小写字母 a-z */  
  14.   
  15.            U+0030-U+0039,  /* 数字 [0..9] */  
  16.   
  17.            U+002E-U+002E;  /* 点 [.] */  
  18.   
  19.      }  

 必须使用字符的字符编码来定义字符范围，这里的字符编码采用Unicode（统一字符编码）标准。

 定义字符范围的另一种做法是在flex-config.xml中添加相关信息。用文本编辑器打开位于Flex Builder 2安装目录下的Flex SDK 2/frameworks/flex-config.xml文件，找到<fonts>标签。
 

  1. <fonts>  
  2.   
  3.     <languages>  
  4.   
  5.         <language-range>  
  6.   
  7.             <lang>englishRange</lang>  
  8.   
  9.             <range>U+0020-U+007E</range>  
  10.   
  11.         </language-range>  
  12.   
  13. </fonts>  

按照以上格式添加字体的字符范围，在<lang>标签中设定标签的名称。这样，在程序中可以直接使用该名称来定义字符范围。例如：

  1. @font-face {  
  2.   
  3.         src:local("Arial");  
  4.   
  5.         fontFamily: myFont;  
  6.   
  7.         flashType: true;  
  8.   
  9.         unicodeRange:” englishRange”  //等同于U+0020-U+007E  
  10.   
  11.  }  

 在flex-config.xml的同目录下还有一个flash-unicode-table.xml文件，其中列出了绝大部分语言的Unicode的字符范围，供开发者参考，其中也有中文的资料：

  1. <language-range>  
  2.   
  3.   <lang>Chinese (All)</lang>  
  4.   
  5.  <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>  
  6.   
  7.  </language-range>  

嵌入字体的另一种方式是把字体放在外部的swf中，然后加载swf文件。例如：

  1. @font-face {  
  2.   
  3.         src:url("./Arial.swf");  //指定文件地址  
  4.   
  5.         fontFamily: “myFont”;       
  6.   
  7.     }  

这里不能使用flashType属性，该属性的值由SWF文件决定，无法再更改。在使用该字体之前，必须保证SWF文件已经加载完毕。

 要在程序中使用该字体：

  1. @font-face {  
  2.   
  3.         src:url("./Arial.swf");  
  4.   
  5.         fontFamily: “myFont”;       
  6.   
  7. }  
  8.   
  9. .PlainText {  
  10.   
  11.         fontFamily: "myFont ";  
  12.   
  13.         fontSize: 12;  
  14.   
  15.   }  
  16.   
  17.   .BoldText {  
  18.   
  19.         fontFamily: "myFont ";  
  20.   
  21.         fontSize: 12;  
  22.   
  23.         fontWeight: bold;  
  24.   
  25. }  

注意：在使用嵌入字体时，即使是同一字体，它的不同样式比如斜体和粗体要单独进行定义，互相独立，不能混在一起。

使用脚本也可以嵌入字体：

  1. [Embed(mimeType='application/x-font', source='../assets/Arial.TTF', fontName='myArialFont')]  
  2.   
  3. private var myFont:Class;  

定义样式：

  1. .PlainText {  
  2.   
  3.         fontFamily: myArialFont;  
  4.   
  5.         fontSize: 12;  
  6.   
  7.  }  

如果嵌入的字体很大，生成的程序文件也会很大，导致加载时要花较长时间，要避免这个问题，可以把字体文件打包成SWF文件，然后加载到程序中。 

您希望在 Flex 应用程序中嵌入一种字体并将它用作基于文本的组件的样式。

下面的示例创建引用嵌入的字体的 font-family 名称的一个类选择器。 接着它会创建一个 Text 控件并将其样式设置为该类选择器。

提示: 您在嵌入字体以节省文件大小时仅可以从字体添加某些字符, 方法是指定您的 @font-face 声明的 unicode-range 属性。

下面是一个使用实例： 

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application   
  3.     xmlns:mx="http://www.adobe.com/2006/mxml"   
  4.     layout="horizontal"   
  5.     horizontalAlign="center"   
  6.     verticalAlign="center"   
  7.     viewSourceURL="src/EmbeddingFonts/index.html"  
  8.   
  9. >  
  10.   
  11.     <mx:Style>  
  12.         @font-face   
  13.         {  
  14.             font-family: Copacetix;  
  15.   
  16.             src: url("assets/copacetix.ttf");  
  17.             unicode-range:  
  18.                 U+0020-U+0040, /* Punctuation, Numbers */  
  19.   
  20.                 U+0041-U+005A, /* Upper-Case A-Z */  
  21.                 U+005B-U+0060, /* Punctuation and Symbols */  
  22.                 U+0061-U+007A, /* Lower-Case a-z */  
  23.                 U+007B-U+007E; /* Punctuation and Symbols */  
  24.   
  25.         }  
  26.   
  27.         .MyTextStyle   
  28.         {   
  29.             font-family: Copacetix;   
  30.             font-size: 24pt;      
  31.         }  
  32.   
  33.     </mx:Style>  
  34.   
  35.     <mx:Text styleName="MyTextStyle" text="Embedded fonts rock!" width="100%"/>  
  36.       
  37.   
  38. </mx:Application>  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xiayong123/p/3717010.html