Chinaunix首页 | 论坛 | 博客
  • 博客访问: 147830
  • 博文数量: 24
  • 博客积分: 3000
  • 博客等级: 中校
  • 技术积分: 320
  • 用 户 组: 普通用户
  • 注册时间: 2008-01-21 10:48
文章分类

全部博文(24)

文章存档

2008年(24)

我的朋友
最近访客

分类: 系统运维

2008-03-24 13:51:05

在处理文本时,为了美观,有时会给文本选择一些特殊的字体,使得文本不那么单调,这就会引发一个问题:由于每个用户的系统有差异,当对方机器上没有安装你 指定的字体时,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(溶解效果)。可以在样式在定义嵌入字体:


  @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;  //指定字体,使用嵌入字体的别名
  }
 

 在嵌入一些双字节型的字体,比如中文字体,日文字体时,字体信息复杂,字体文件大,为了减小程序的文件大 小,可以对嵌入字体的字符范围进行限制,这样,没有使用的字符信息不会被包含在文件中。例如上面使用了英文字体,只能使用英文范围内的字符,如果使用了中 文,将无法显示。
 在font-face中使用unicodeRange来指定字符范围,例如:
@font-face {
        src:local("Arial");
        fontFamily: myFont;
        flashType: true;
        unicodeRange:
           U+0041-U+005A,  /* 大写字母 [A..Z] */
           U+0061-U+007A,  /* 小写字母 a-z */
           U+0030-U+0039,  /* 数字 [0..9] */
           U+002E-U+002E;  /* 点 [.] */
     }
 必须使用字符的字符编码来定义字符范围,这里的字符编码采用Unicode(统一字符编码)标准。
 定义字符范围的另一种做法是在flex-config.xml中添加相关信息。用文本编辑器打开位于Flex Builder 2安装目录下的Flex SDK 2/frameworks/flex-config.xml文件,找到标签。
 
   
       
            englishRange
            U+0020-U+007E
       

按照以上格式添加字体的字符范围,在标签中设定标签的名称。这样,在程序中可以直接使用该名称来定义字符范围。例如:
@font-face {
        src:local("Arial");
        fontFamily: myFont;
        flashType: true;
        unicodeRange:” englishRange”  //等同于U+0020-U+007E
 }
 在flex-config.xml的同目录下还有一个flash-unicode-table.xml文件,其中列出了绝大部分语言的Unicode的字符范围,供开发者参考,其中也有中文的资料:

  Chinese (All)
 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
 

 
 嵌入字体的另一种方式是把字体放在外部的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文件,然后加载到程序中。下次再说这个问题吧


<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx=""
    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>

阅读(1859) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~