Flex4 Embed Font (2) ----- Embed Font in TextFiled

 

刚开始的时候，认为Flex4绑定字体做的很优雅，不过在绑定字体到TextFiled上面的时候就出了问题。字体没有能正常的显示出来

 

究其原因是由于Flex4采用了一种新的文字渲染方式，在默认绑定方式下，对Flex3中Text类型不在予以支持。

 

可以在Adobe的官网上找到相应的证实 ，在文章结尾说改动已经列入Flex4 SDK的开发计划中了。

 

不过就目前而言 暂时只能采取其建议的替代方式

 

MXML语言:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo"
               minWidth="100"
               minHeight="100"
               width="168"
               height="209"
               initialize="application1_initializeHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.core.UIComponent;
            import mx.events.FlexEvent;
            private var parentUIComponent:UIComponent
            private var textFiled:TextField

            protected function application1_initializeHandler(event:FlexEvent):void
            {
                parentUIComponent=new UIComponent();
                this.addElement(parentUIComponent);
                parentUIComponent.x=30;
                parentUIComponent.y=100;

                textFiled=new TextField();
                textFiled.text="Tunied";
                /*
                    对当前的TextFiled指定
                    1· 使用字体绑定
                    2·设置绑定字体为 baroqueScript_TextFiled
                */
                textFiled.embedFonts=true;
                var sFormat:TextFormat=textFiled.getTextFormat();
                sFormat.font="baroqueScript_TextFiled";
                textFiled.defaultTextFormat=sFormat;
                textFiled.setTextFormat(sFormat);
               
                parentUIComponent.addChild(textFiled);
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
        @font-face{
            src : url(../libs/font/BaroqueScript.ttf);
            font-family : "baroqueScript"
        }
        @font-face{
            src : url(../libs/font/BaroqueScript.ttf);
            font-family : "baroqueScript_TextFiled";
            embedAsCFF: false;
        }
    </fx:Style>
    <s:Button x="10"
              y="39"
              label="Tunied"
              fontFamily="baroqueScript"
              width="135"
              height="50"/>
    <s:Button x="41"
              y="10"
              label="Tunied"/>
</s:Application>

 

 

 

在代码绑定字体时候选择 embedAsCFF: false;  这样所绑定的字体可以用于早期的Text渲染。

 

注：如果程序不但有Flex4控件，而且还有Flex3控件的话。（或者像我一样，在程序中需要使用TextFiled）则需要对同一份字体绑定两次。这样会增加程序的大小。

 

 

参考资料

 

1· http://www.allmas-tn.com/2008111710/gumbo-using-embedded-fonts-with-the-new-text-primitives.html

 

2· http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/

 

3· http://www.adobe.com/devnet/flex/articles/flex3and4_differences_06.html

 

4· http://www.adobe.com/devnet/flex/articles/flex3and4_differences_06.html