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

彭博 发布于 2012/03/09 12:24
阅读 2K+
收藏 0

概述

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,总文件大小还在可接受的范围内。

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


原文链接:http://blog.csdn.net/hunkcai/article/details/5764543
加载中
返回顶部
顶部