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