`

Flex 中文字体的问题

    博客分类:
  • Flex
阅读更多

在处理文本时,为了美观,有时会给文本选择一些特殊的字体,使得文本不那么 单调,这就会引发一个问题:由于 每个用户的系统有差异,当对方机器上没有安装你指定的字体时,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, /* 大写字母 [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文件,找到<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文件,然后加载到程序中。

附带一个字体:ksphonet.ttf,用于显示音标:)

 

分享到:
评论

相关推荐

    Flex 使用中文设备字体 解决办法

    解决Flex中文显示问题的步骤如下: 1. **创建字体库**: 首先,你需要获取支持中文的TrueType字体文件(.ttf或.otf格式)。常见的中文字体有宋体、黑体、仿宋等。确保这些字体文件是合法并可以在商业项目中使用的。 ...

    Flex3.0设备字体,字体嵌入

    为了解决这一问题,Flex提供了两种解决方案:**设备字体**和**字体嵌入**。 #### 二、设备字体 设备字体是一种用于解决跨平台字体兼容性的技术。它能够确保即使在用户计算机上没有安装指定字体的情况下,文本也能尽...

    Flex使用问题汇总

    例如,将默认的`fontSize`从9改为12,以便更好地显示中文字体: ```css .errorTip { borderColor: #CE2929; borderStyle: "errorTipRight"; color: #FFFFFF; fontSize: 12; /* 修改字体大小 */ fontWeight: ...

    Flex解决乱码问题

    在开发基于Adobe Flex的应用程序时,开发者可能会遇到一个常见的问题:中文字符或其它非英文字符在不同的浏览器上显示为乱码。这个问题对于那些希望在国际化应用中提供良好用户体验的开发者来说尤其令人头疼。本文将...

    Flex4.0中文API

    Flex 4.0中文API是Adobe Flex开发框架的一个重要参考资料,尤其对于中文用户来说,它提供了详尽的类库、方法、属性和事件的说明,帮助开发者更好地理解和使用Flex技术进行富互联网应用(RIA)的开发。Flex API是Flex...

    flex2中文学习资料

    3. **Flex中文帮助** 这可能是一个包含Flex2中文文档的文件或目录,对于初学者来说极为宝贵。文档通常包括API参考、教程、示例代码和最佳实践等内容。通过这些资料,开发者可以了解Flex2的组件库、事件模型、数据...

    Flex4中文帮助文档

    这个"Flex4中文帮助文档"包含了丰富的技术信息,旨在帮助开发者更好地理解和使用Flash Builder 4,这是一个专为Flex应用程序开发设计的集成开发环境(IDE)。 1. **Flex4核心概念**: - **MXML**:Flex4的主要编程...

    flex4.5中文文档

    ### Flex 4.5 中文文档关键知识点概览 #### 1. 引言与概述 - **Flex 4.5 发行版介绍**:此版本着重于将Flex框架拓展至移动设备领域,如智能手机和平板电脑。通过Adobe AIR技术的支持,开发者能够以接近桌面应用的...

    Flex中文本高亮显示

    标题“Flex中文本高亮显示”涉及到的是在Adobe Flex中实现文本内容的高亮显示技术。Flex是一款基于ActionScript的开源框架,用于构建富互联网应用程序(RIA)。在Flex中,文本高亮通常用于突出显示用户搜索的关键字...

    flex英文帮助文档(非常详细)

    - **字体**:介绍了如何在 Flex 应用中使用和管理字体资源。 - **Spark Skinning**:详细讲解了 Spark 框架下的皮肤设计方法。 - **MX 组件皮肤化**:讲述了如何对 MX 框架下的组件进行皮肤化处理。 - **嵌入资产**...

    FlexBuilder+3+中文教程

    通过这个中文教程,开发者将能够逐步掌握FlexBuilder 3的使用,熟练地创建和部署富互联网应用程序,同时也能深入理解Flex的开发理念和实践技巧。无论是初学者还是有一定基础的开发者,都能从中获益。

    Flex时间选择组件

    4. **本地化支持**:考虑到全球用户的需求,可能增加了多语言支持,包括中文、英文等,使得时间格式和语言可以适应不同地区。 5. **错误处理和兼容性**:对可能出现的错误进行了处理,确保组件在不同浏览器和操作...

    flex通过AlivePDF生成PDF文档

    - **`IFont` 接口与字体类**:包括`CoreFont`、`EmbeddedFont`等,用于定义PDF文档中的字体样式。 - **`IColor` 接口与颜色类**:如`RGBColor`、`CMYKColor`等,用于设置PDF文档中的颜色。 - **`IImage` 接口与...

    flex3 google finance中文注释

    在“flex3 google finance中文注释”项目中,我们可以期待学习到以下关键知识点: 1. Flex3基础:包括MXML和ActionScript 3.0的使用,它们分别是Flex3的标记语言和编程语言。MXML用于定义界面布局和组件,而...

    Flex 学习文档必备

    - **Flex的样式系统**:通过CSS-like语法定义和管理组件的外观,包括颜色、字体、边距等样式属性。 - **Flex的应用程序生命周期**:从初始化到运行、暂停、恢复和终止的各个阶段,理解这些阶段有助于优化应用性能。 ...

    flex瘦身优化之我见(内部资料)

    例如,在英文应用中,无需嵌入中文字符,以减小SWF大小。 - **推迟加载**:对于不立即需要的资源,可以采用延迟加载策略,直到用户真正需要时才进行加载,如组件的按需加载、数据的异步获取等。 - **代码优化**:...

    flex 帮助文档 中文 doc

    Flex 允许通过CSS 控制组件的样式,如字体、颜色、大小等。样式可以通过主题、CSS 文件、MXML 样式块或直接在组件实例中设置。 6. **图形资源**: 应用可能包含图标、图像等图形资源,以增强视觉表现。 7. **...

Global site tag (gtag.js) - Google Analytics