Embed font in ActionScript class in Flex

When creating an mxml component it is easy to embed the desired font in thi开发者_运维问答s way:

@font-face {
    src: local("Arial");
    fontFamily: ArialEmbedded;
}

In my code I need to embed the font for a component that is the part of the class implemented in *.as file. How can I do this?

Regards, Rafal

I covered this a few weeks ago on my site. There's too much info to copy/paste here, so you can get it at: http://divillysausages.com/blog/as3_font_embedding_masterclass

There's code & source files as well. Let me know if you have any problems.

Here is the simple sample how you can embed font in custom ActionScript component:

package
{
import flash.display.DisplayObject;

import mx.core.IUITextField;
import mx.core.UIComponent;
import mx.core.UITextField;

[Style(name="fontFamily", type="String", inherit="yes")]
public class ComponentWithFontEmbedding extends UIComponent
{
    private var label:IUITextField;

    override protected function createChildren():void
    {
        super.createChildren();

        if (!label)
        {
            label = IUITextField(createInFontContext(UITextField));
            label.styleName = this;
            addChild(DisplayObject(label));
            label.text = "Hello";
        }
    }

    override protected function measure():void
    {
        measuredWidth = measuredMinWidth = 100;
        measuredHeight = measuredMinHeight = 50;
    }
}
}

I omitted real measurement for simplicity. So the code is pretty simple and uses very lightweight UITextField. But you can use Label the similar way using styling.

The sample usage is the following:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" xmlns:local="*">
    <mx:Style>
        @font-face {
            src: local("Arial");
            fontFamily: ArialEmbedded;
        }
    </mx:Style>
    <local:ComponentWithFontEmbedding fontFamily="ArialEmbedded" verticalCenter="0" horizontalCenter="0" />
</mx:Application>

Hope this helps.