Recipe 9.17.
Embedding Fonts
Problem
You want
to ensure that text displays
properly, even if the intended font isn't installed on the user's
computer.
Solution
Embed the font by using the [Embed] metatag. Then set the
text field's embedFonts property to true, and
apply the font to the text field using a <font> tag, a
TextFormat object, or
CSS.
Discussion
You should embed fonts if you want to ensure
that text displays using the intended font, even if the user's
computer does not have that font installed. To embed a font, use
the [Embed] metatag. The [Embed] metatag should
appear in an ActionScript file outside the class declaration. You
can embed either TrueType fonts or system fonts. To embed a
TrueType font with the [Embed] metatag use the following
syntax:
[Embed(source="pathToTtfFile", fontName="FontName", mimeType="application/x-font-truetype")]
The path to the TrueType font file can be
relative or absolute, such as in the following example:
[Embed(source="C:\Windows\Fonts\Example.ttf", fontName="ExampleFont", mimeType="application/x-font-truetype")]
The fontName attribute value is how you
refer to the font from CSS or ActionScript.
The syntax for embedding system fonts is
similar, except that it uses a systemFont attribute rather
than a source attribute. The systemFont attribute value is the
name of the system font you want to embed. The following embeds
Times New Roman:
[Embed(systemFont="Times New Roman", fontName="Times New Roman", mimeType="application/x-font-truetype")]
|
The preceding example uses the same name for
fontName as the actual system font name.
|
|
Once you've embedded the font, the next step is
to tell the text field to use the embedded font. To do that, simply
set the embedFonts property of the text field to
true. By default, the property is false, which
means that Flash uses device fonts. By setting the
embedFonts property to true, the text field can
use embedded fonts only. If you try to assign a device font to a
text field with embedFonts set to TRue, nothing
is displayed:
field.embedFonts = true;
Once you've enabled embedded fonts, your next
step is to tell the text field which embedded font to use; you do
this with a <font> tag, a TextFormat object,
or with CSS. For example, if the fontName value is Times New
Roman, your code might look like the following:
formatter.font = "Times New Roman";
The following example sets the font by using a
font tag:
field.htmlText = "<font family='Times New Roman'>Example</font>";
And the following illustrates how to set the
font by using CSS:
var css:StyleSheet = new StyleSheet( );
css.setStyle("p", {fontFamily: "Times New Roman"});
field.htmlText = "<p>Example</p>";
You cannot specify a comma-delimited list of
fonts if embedFonts is set to TRue.
See Also
Recipes
9.13
and 9.16
|