网页程序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:uicomponent< span=""> x="10" y="10" id="_Panel">

        

    

]]>

进阶

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

 

Next

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

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