Flex字体篇——动态嵌入字体

概述

Flex编译器，位于flex sdk的bin目录，例如：Flash Builder 4 sdk 3.5 "C:/Program Files/Adobe/Adobe Flash Builder 4/sdks/3.5.0/bin"， 编译器的详细使用说明参考官方文档Using the Flex Compilers主题。

mxmlc.exe：应用程序编译器，可以把*.mxml(*.as)、*.css等主要文件编译成swf。

flash/flex使用设备字体存在严重锯齿问题，不够美观，而且当计算机没有相应字体时会造成内容无法显示等问题，该系列文章介绍flex技术平台下如何实现字体的动态嵌入。

字体样式

需要编译的css文件：WB_Arial.css

/* CSS file */

@font-face {

src:local("Arial");

fontFamily: WB-Arial; /* 嵌入后的字体名称 */

fontStyle: normal;/* 常用值：normal, italic */

fontWeight: normal; /* 常用值：normal, bold */

advancedAntiAliasing: true;

}

使用mxmlc.exe编译字体样式

打开命令行，运行以下命令编译css，生成swf：(格式：mxml.exe [srcFile] –output [destFile])

mxmlc.exe WB_Arial.css

使用字体swf

用编辑器生成WB_Arial.swf后，在FontTest2.mxml里加载使用：

<![CDATA[

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*" creationComplete="Init()" backgroundColor="#FFFFFF">

<mx:Script>

import mx.events.StyleEvent;

private var styleLoader:IEventDispatcher;

private function Init():void

{

styleLoader = mx.styles.StyleManager.loadStyleDeclarations("Fonts/WB_Arial.swf",false, true);//加载字体swf

styleLoader.addEventListener(StyleEvent.COMPLETE, OnStyleEvent);

styleLoader.addEventListener(StyleEvent.ERROR, OnStyleEvent);

}

private function OnStyleEvent(event:StyleEvent):void

{

if(event.type == StyleEvent.COMPLETE)

{

trace("load WB_Arial.swf complete....");

var textField:TextField = new TextField();

textField.type = TextFieldType.DYNAMIC;

textField.autoSize = TextFieldAutoSize.LEFT;

textField.embedFonts = true;//嵌入设置

var format:TextFormat = new TextFormat("WB-Arial", 40);//默认使用嵌入的WB_Arial字体

textField.defaultTextFormat = format;

textField.text = "Anti-Money Laundering";

textField.rotation = 10;

_Panel.addChild(textField);

}

else if(event.type == StyleEvent.ERROR)

{

trace(event.errorText);

}

}

</mx:Script>

<mx:UIComponent x="10" y="10" id="_Panel">

</mx:UIComponent>

</mx:Application>

]]>

进阶

1. 命令行生成swf这项操作，可以让外部exe来完成，实现swf的动态生成。
2. 文字的高级处理请尽量使用flash.text.TextField类，以便达到更好的控制，不建议使用mx.*命名空间下的文本控件。
3. TextField的htmlText支持多种嵌入字体同时显示，但确保htmlText里面使用的字体都是嵌入的。

Next

英文字体文件比较少，例如：Arial，把常规、加粗、斜体等各种组合都生成相应的字体swf，总文件大小还在可接受的范围内。

但对于中文字库，文件比较大，把整个字库都嵌入，文件太大不利于网络传输，必须按需嵌入，下篇将介绍中文字体动态嵌入的解决方案。