Flex 4.6: embedded fonts not applied to TextField

问题:

I am trying to use embedded fonts (Flex 4.6) in a UITextField. As long as I use a font that is registered with Windows, it works fine, but for a font not registered, the UITextField defaults to TimesRoman (or something similar)

Note that when I check to see if the font is embedded, it returns True (FlexGlobals.topLevelApplication.systemManager.isFontFaceEmbedded(txtFormatCoda))

So what am I missing?

In the code below, if I add the font Kredit to Windows Font, the UI text field appears in Kredit font, but if I remove it from Windows/font directory, the field appears in TimesNewRoman (default font).

<?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/mx" minWidth="955" minHeight="600"  creationComplete="onComplete()">
    <s:Group id="TextCanvas" x="121" y="97" width="474" height="800">
    </s:Group>
    <fx:Style>
        @font-face {
            src: url("fonts/KREDIT1.TTF");
            fontFamily: Kredit;
            embed-as-cff:false;
            advancedAntiAliasing:true;
        }
    </fx:Style> 
    <fx:Script>     
        import mx.core.FlexGlobals;
        import mx.core.UIComponent;
        import mx.core.UITextField;
        import mx.core.UITextFormat;


        public function onComplete():void{
            var txtFldCoda:UITextField = new UITextField();
            var txtFormatCoda:UITextFormat = new UITextFormat(this.systemManager);
            var compCoda:UIComponent = new UIComponent();
            compCoda.addChild(txtFldCoda);
            txtFldCoda.embedFonts=true;         
            txtFldCoda.width=300;
            txtFormatCoda.size=33;
            TextCanvas.addElement(compCoda);
            txtFldCoda.text="Testing Kredit";
            txtFormatCoda.font= "Kredit";
            txtFormatCoda.color="0x0ff345";
            var b2:Boolean = FlexGlobals.topLevelApplication.systemManager.isFontFaceEmbedded(txtFormatCoda);
            if(b2==false){
                trace("not embedded: " + txtFormatCoda.font);
            }
            txtFldCoda.defaultTextFormat= txtFormatCoda;//note that setTextFormat must be after setting the text
            txtFldCoda.setTextFormat(txtFormatCoda);//note that setTextFormat must be after setting the text
            txtFldCoda.x=0;
            txtFldCoda.y=100;           
        }       
    </fx:Script>
</s:Application>

回答1:

Thanks Mahesh

Actually this worked for me:

var comp:UIComponent = new UIComponent();
comp.setStyle('fontFamily', fontName);                      

Basically I had to do setStyle on the UIComponent which is the parent of this UITextField. I wish Adobe would document this.

回答2:

Below code may help you: - I have commented one line and modified style tag ...

<?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/mx" minWidth="955" minHeight="600"  creationComplete="onComplete()"
               >
    <s:Group id="TextCanvas" x="121" y="97" width="474" height="800">
    </s:Group>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

         @font-face {
            src: url("fonts/KREDIT1.TTF");
            fontFamily: KREDIT1;
            embed-as-cff: false;
            advancedAntiAliasing:true;
        } 

        s|Application
        {
            fontFamily:KREDIT1;
        }
    </fx:Style> 
    <fx:Script>     
        import mx.core.FlexGlobals;
        import mx.core.UIComponent;
        import mx.core.UITextField;
        import mx.core.UITextFormat;

        public function onComplete():void{
            var txtFldCoda:UITextField = new UITextField();
            var txtFormatCoda:UITextFormat = new UITextFormat(this.systemManager);
            var compCoda:UIComponent = new UIComponent();
            compCoda.addChild(txtFldCoda);
            txtFldCoda.embedFonts=true;         
            txtFldCoda.width=300;
            txtFormatCoda.size=33;
            TextCanvas.addElement(compCoda);
            txtFldCoda.text="Testing Kredit";
            //txtFormatCoda.font= "Kredit";
            txtFormatCoda.color="0x0ff345";
            var b2:Boolean = FlexGlobals.topLevelApplication.systemManager.isFontFaceEmbedded(txtFormatCoda);
            if(b2==false){
                trace("not embedded: " + txtFormatCoda.font);
            }
            txtFldCoda.defaultTextFormat= txtFormatCoda;//note that setTextFormat must be after setting the text
            txtFldCoda.setTextFormat(txtFormatCoda);//note that setTextFormat must be after setting the text
            txtFldCoda.x=0;
            txtFldCoda.y=100;           
        }       
    </fx:Script>
</s:Application>