Runtime Font Loading
From Gaia Framework Wiki
Contents |
Overview
With Gaia's runtime font loading, you can easily load fonts into Gaia from any page or swf asset and then use those fonts inside any other page or swf asset in your site.
Embedding The Fonts In Your Library
First, you need to embed your font(s) in the library of your .fla file.
On the top right corner of the library, click the drop-down and choose the New Font menu selection.
A panel will appear where you can name your embedded font.
Check the box to Export for Actionscript and give the font a class name. In this example, it's named "MyArial".
Making The Font Available To Gaia
There are two ways to let Gaia know about the font(s) in your swf file.
1) You can declare a public Array named "fonts" on the root timeline or the document class of your swf.
public var fonts:Array = ["Arial", "ArialBold", "ArialOblique"];
2) You can optionally set an attribute fonts on your page or asset node. Make sure you do not put spaces between the font names.
// if the fonts are in your page swf <page id="index" src="index.swf" fonts="Arial,ArialBold,ArialOblique"/> // if the fonts are in your asset swf <asset id="myFonts" src="fonts.swf" fonts="Arial,ArialBold,ArialOblique"/>
Both work the same, but Gaia will ignore the site.xml font attribute if there is a public var fonts:Array in your swf.
Once you're done, publish the swf.
Accessing The Fonts
Gaia will automatically register your embedded fonts for use throughout your site. Then, there are two API methods for accessing the fonts.
Gaia.api.getAvailableFonts():Array
This function returns an Array of the class names of all the fonts that were successfully registered by all swfs that have loaded in your site. These are the names like "Arial", "ArialBold", and "ArialOblique".
Gaia.api.getFontName(className:String):String
Pass the font class name, like "ArialOblique" and this returns the runtime name of the font for use in a TextFormat, node in htmlText.
You can also use StyleSheets, which do not require the above methods.
StyleSheet Example
Here is an example using a StyleSheetAsset, which is an easy way to do font embedding in TextFields.
site.xml
<site title="Font Example">
<page id="index" src="index.swf">
<asset id="fonts" src="fonts.swf"/>
<asset id="styles" src="flash.css"/>
</page>
</site>
flash.css
body {
font-family: Arial;
font-size: 16;
color: #000000;
}
strong {
font-family: Arial-Bold;
display: inline;
}
em {
font-family: Arial-Oblique;
display: inline;
}
The font swf has the three Arial fonts embedded for normal, bold and italic.
Note the CSS file contains XHTML strict tags for bold and italic. Because Flash's HTML uses the older tags "b" for bold and "i" for italic, you need to specify the display as inline so it doesn't put linebreaks in after the strong and em tags.
Next create your TextField, apply the StyleSheet (you have to apply it before you set the htmlText), and then set the htmlText.
TXT_Label = new TextField();
TXT_Label.width = 400;
TXT_Label.embedFonts = true;
TXT_Label.autoSize = TextFieldAutoSize.LEFT;
TXT_Label.antiAliasType = AntiAliasType.ADVANCED;
TXT_Label.styleSheet = IStyleSheet(Gaia.api.getPage("index").assets.styles).style;
TXT_Label.htmlText = "<body>This is <strong>a bold test</strong> and
<em>an italic test</em>. Looks great!</body>";
addChild(TXT_Label);
TextFormat Example
You can also use TextFormat to use your embedded fonts.
site.xml
<site title="Font Example">
<page id="index" src="index.swf">
<asset id="fonts" src="fonts.swf"/>
</page>
</site>
Actionscript
TXT_Label = new TextField();
TXT_Label.width = 400;
TXT_Label.embedFonts = true;
TXT_Label.autoSize = TextFieldAutoSize.LEFT;
TXT_Label.antiAliasType = AntiAliasType.ADVANCED;
//
var tf:TextFormat = new TextFormat();
tf.font = Gaia.api.getFontName("ArialBold");
tf.size = 16;
TXT_Label.defaultTextFormat = tf;
TXT_Label.text = "This is some Bold Arial text at 16 points";
addChild(TXT_Label);
Font Tag Example
This example shows how to use font tags in HTML.
site.xml
<site title="Font Example">
<page id="index" src="index.swf">
<asset id="fonts" src="fonts.swf"/>
</page>
</site>
Actionscript
TXT_Label = new TextField();
TXT_Label.width = 400;
TXT_Label.embedFonts = true;
TXT_Label.autoSize = TextFieldAutoSize.LEFT;
TXT_Label.antiAliasType = AntiAliasType.ADVANCED;
var regular:String = Gaia.api.getFontName("Arial");
var bold:String = Gaia.api.getFontName("ArialBold");
var italic:String = Gaia.api.getFontName("ArialItalic");
TXT_Label.htmlText = '<font size="16" face="' + regular + '">This is <font face="' + bold + '">a bold test</font>
and <font face="' + italic + '">an italic test</font>. Looks great!</font>";
addChild(TXT_Label);
Embedding Font Ranges
If you do not want to embed an entire Font character set, Flash CS4 (not CS3) and any mxmlc compiler (such as FlashDevelop or FlexBuilder) give you an Actionscript-only option to do so. This is especially helpful for Asian character sets, which can be 50MB and higher! Note: This is not a Gaia-specific topic, but I am including it here since it is related and helpful to know.
Using the metadata Embed tag in AS3, you can embed specific ranges of fonts and then make them available to your entire site by registering them. In this example, Arial and Arial Bold are being made available to your entire site. Note that when using this methodology. these fonts are not available using the Gaia font API methods, but they are available to your TextFields by using the name you set in the fontFamily attribute, similar to setting a class name.
package
{
public class MyClass
{
[Embed(source = "C:/WINDOWS/Fonts/ARIAL.TTF", fontFamily="Arial", unicodeRange="U+0020-U+007E")]
private static var arial:Class;
[Embed(source = "C:/WINDOWS/Fonts/ARIALBD.TTF", fontFamily="ArialBold",
fontStyle="bold", fontWeight="bold", unicodeRange="U+0020-U+007E")]
private static var arialBold:Class;
public function MyClass()
{
Font.registerFont(arial);
Font.registerFont(arialBold);
}
}
}
