Using mxmlc Embed fonts with TextField
NOTE: From Josh’s comment below you can do this in the Embed metadata. See the end of the post for updated code.
With the latest drops of the Flex SDK, 4 and higher, the compiler mxmlc has changed. One of the changes is that it defaults the Spark components to use Text Layout Framework (TLF) for Text fields. TLF is a Flash Player 10.0 plus feature and is built up on the flash.text.engine classes. The mxmlc compiler has allowed you to embed classes through CSS or actionscript with the use of [Embed] metadata.
With the latest mxmlc changes when you use Embed metadata for embeding fonts it embed by default the font as “embeddedCFF” type. This type of embedding of the font is required for the new TLF framework, thus making this type of embed fonts unusable with the plan old TextField and TextFormat. But there is a compiler option to change the way mxmlc embeds the font as a compiler argument. The compiler argument is:
-managers=flash.fonts.AFEFontManager
This is good to know if you are playing with ActionScript 3.0 only projects and want to use the Embed metadata and embedding fonts for use with TextField. Of course you can always just learn TLF and be on your way.
Here is a simple AS3 only application to test some embedding fonts:
{
import flash.display.Sprite;
import flash.text.Font;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
public class EmbedFontTest extends Sprite
{
[Embed(source="MYRIAD.TTF", fontFamily="MyriadEmbed", mimeType="application/x-font")]
public var MyriadEmbed:Class;
public function EmbedFontTest()
{
var format:TextFormat = new TextFormat();
format.size = 36;
format.font = "MyriadEmbed";
format.color = 0xFCF374;
var tf:TextField = new TextField();
tf.autoSize = TextFieldAutoSize.LEFT;
tf.embedFonts = true;
tf.width = 100;
tf.height = 60;
tf.text = "hello";
tf.setTextFormat(format);
var names:String = "";
var fonts:Array = Font.enumerateFonts();
for each (var key:Font in fonts)
{
names += key.fontName + " - " + key.fontStyle + " - " + key.fontType;
}
var tf2:TextField = new TextField();
tf2.autoSize = TextFieldAutoSize.LEFT;
tf2.width = 300;
tf2.height = 500;
tf2.y = 120;
tf2.text = names;
addChild(tf);
addChild(tf2);
}
}
}
With out the “-managers=flash.fonts.AFEFontManager” compiler argument added to the compiler arguments the above code will not show the yellow text “hello”.
UPDATE:
The most efficient way to do this is to embed the font as a class that extends flash.text.Font. Here is the new Font class called MyFont.as:
{
import flash.text.Font;
[Embed(source="MYRIAD.TTF", fontFamily="MyFont",
embedAsCFF="false", mimeType="application/x-font")]
public class MyFont extends Font
{
public function MyFont()
{
super();
}
}
}
And then the main application looks like this:
{
import flash.display.Sprite;
import flash.text.Font;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
public class EmbedFontTest extends Sprite
{
public function EmbedFontTest()
{
var fontIns:MyFont;
var format:TextFormat = new TextFormat();
format.size = 36;
format.font = "MyFont";
format.color = 0xFCF374;
var tf:TextField = new TextField();
tf.autoSize = TextFieldAutoSize.LEFT;
tf.embedFonts = true;
tf.width = 100;
tf.height = 60;
tf.text = "hello";
tf.setTextFormat(format);
var names:String = "";
var fonts:Array = Font.enumerateFonts();
for each (var key:Font in fonts)
{
names += key.fontName + " - " + key.fontStyle + " - " + key.fontType;
}
var tf2:TextField = new TextField();
tf2.autoSize = TextFieldAutoSize.LEFT;
tf2.width = 300;
tf2.height = 500;
tf2.y = 120;
tf2.text = names;
addChild(tf);
addChild(tf2);
}
}
}
Pingback: Tweets that mention Renaun's thoughts on Using mxmlc Embed fonts with TextField -- Topsy.com