Using embedded fonts
Rather than rely on a client machine to have the fonts you specify, you can embed TrueType font (TTF) or OpenType font (OTF) families in your Flex application. This means that the font is always available to Flash Player when the application is running, and you do not have to consider the implications of a missing font.
Embedded fonts have the following benefits:
- Client environment does not need the font to be installed.
- Embedded fonts are anti-aliased, which means that their edges are smoothed for easier readability. This is especially apparent when the text size is large.
- Embedded fonts can be partially or fully transparent.
- Embedded fonts can be rotated.
- Embedded fonts provide smoother playback when zooming.
- Text appears exactly as you expect when you use embedded fonts.
- When you embed a font, you can use the advanced anti-aliasing information that provides clear, high-quality text rendering in SWF files. Using advanced anti-aliasing greatly improves the readability of text, particularly when it is rendered at smaller font sizes. For more information about advanced anti-aliasing, see Using advanced anti-aliasing.
Using embedded fonts is not always the best solution, however. Embedded fonts have the following limitations and drawbacks:
- Embed only TrueType or OpenType fonts. To embed other font types such as Type 1 PostScript fonts, embed that font in a SWF file that you create in Flash 8, and then embed that SWF file in your Flex application. For more information, see Embedding fonts from SWF files.
- Embedded fonts increase the file size of your application, because the document must contain font outlines for the text. This can result in longer download times for your users.
- Embedded fonts, in general, decrease the legibility of the text at sizes smaller than 10 points. All embedded fonts use anti-aliasing to render the font information on the client screen. As a result, fonts may look fuzzy or illegible at small sizes. To avoid this fuzziness, you can use advanced anti-aliasing to render fonts in Flex applications. For more information, see Using advanced anti-aliasing.
- In some cases, embedded fonts can be truncated when they are used in visual components. In these cases, you might be required to change the padding properties of the component by using style properties or subclassing it. This only occurs with some fonts.
You typically use Cascading Style Sheets (CSS) syntax for embedding fonts in Flex applications. You use the @font-face "at-rule" declaration to specify the source of the embedded font and then define the name of the font by using the fontFamily property. You must specify the @font-face declaration for each face of the font for the same family that you use. The source can be a local Java Runtime Environment (JRE) font or one that is accessible by using a file path. You use this font family name in your MXML code to refer to the embedded font.
If you attempt to embed a font that the Flex compiler cannot find, Flex throws an error and your application does not compile.
Embedded font syntax
To embed TrueType or OpenType fonts, you use the following syntax in your style sheet or <mx:Style> tag:
@font-face {
src: url("location") | local("name");
fontFamily: alias;
[fontStyle: normal | italic | oblique;]
[fontWeight: normal | bold | heavy;]
[advancedAntiAliasing: true | false;]
}
The src property specifies how the compiler should look for the font and the name of the font to look for. You can load a font either by its filename (by using src:url) or by its system font name (by using src:local). This property is required. For more information, see Locating embedded fonts. The src property also helps determine which font manager the compiler will use; for more information, see About the font managers.
The fontFamily property sets the alias for the font that you use to apply the font in style sheets. This property is required. If you embed a font with a family name that matches the family name of a system font, the Flex compiler gives you a warning. You can disable this warning by setting the show-shadows-system-font-warnings compiler option to false.
The fontStyle and fontWeight properties set the type face values for the font. These properties are optional. The default values are normal.
The advancedAntiAliasing property determines whether to include the advanced anti-aliasing information when embedding the font. This property is optional. The default value is true. You cannot use this option when embedding fonts from a SWF file (see Embedding fonts from SWF files). For more information on using advanced anti-aliasing, see Using advanced anti-aliasing.
The following example embeds the MyriadWebPro.ttf font file:
@font-face {
src: url("../assets/MyriadWebPro.ttf");
fontFamily: myFontFamily;
advancedAntiAliasing: true;
}
The following example embeds that same font, but by using its system font name:
@font-face {
src: local("Myriad Web Pro");
fontFamily: myFontFamily;
advancedAntiAliasing: true;
}
After you embed a font with an @font-face declaration, you can use the value of the fontFamily property, or alias, in a type or class selector. The following example uses myFontFamily, the value of the fontFamily property, as the font in the VBox type selector:
<?xml version="1.0"?>
<!-- fonts/EmbeddedFontFace.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
@font-face {
src:url("../assets/MyriadWebPro.ttf");
fontFamily: myFontFamily;
advancedAntiAliasing: true;
}
VBox {
fontFamily: myFontFamily;
fontSize: 15;
}
Panel {
paddingLeft: 10;
paddingTop: 10;
paddingBottom: 10;
paddingRight: 10;
}
</mx:Style>
<mx:Panel title="Embedded Font Applied With Type Selector">
<mx:VBox>
<!-- This button attempts to use the font of the VBox container. -->
<mx:Button label="Click Me"/>
<mx:Label text="This is a label."/>
<mx:TextArea width="250">
<mx:text>
The text in this TextArea control uses the
myClass class selector.
</mx:text>
</mx:TextArea>
</mx:VBox>
</mx:Panel>
<!-- This button uses the default font because it is not in
the VBox. -->
<mx:Button label="Click Me"/>
</mx:Application>
The executing SWF file for the previous example is shown below:
You can also apply the embedded font inline by specifying the alias as the value of the control's fontFamily property, as the following example shows:
<?xml version="1.0"?>
<!-- fonts/EmbeddedFontFaceInline.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
@font-face {
src:url("../assets/MyriadWebPro.ttf");
fontFamily: myFontFamily;
advancedAntiAliasing: true;
}
Panel {
paddingLeft: 10;
paddingTop: 10;
paddingBottom: 10;
paddingRight: 10;
}
</mx:Style>
<mx:Panel title="Embedded Font Applied Inline">
<mx:VBox fontFamily="myFontFamily">
<mx:Button label="Click Me"/>
<mx:Label text="This is a label."/>
<mx:TextArea width="200">
<mx:text>
The text in the TextArea control is Myriad Web Pro.
</mx:text>
</mx:TextArea>
</mx:VBox>
</mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:
When you run this example, you might notice that the Button control's label uses a system font. This is because the default style of a Button control's label uses a bold typeface. However, the embedded font's typeface (Myriad Web Pro) does not contain a definition for the bold typeface. To have the Button control's label use the proper typeface, you must either embed a font's bold typeface so that the label of a Button control is rendered with the correct font, or change the Button control's typeface to be non-bold. For information on embedding bold typefaces, see Using multiple typefaces.
Locating embedded fonts
The src property in the @font-face declaration specifies the location of the font family. You can specify a url or a local function. The following table describes these functions:
|
Attribute |
Description |
|---|---|
| url |
Embeds a TrueType or OpenType font by location by specifying a valid URI to the font. The URI can be relative (for example, ../fontfolder/akbar.ttf) or absolute (for example, c:/myfonts/akbar.ttf). |
| local |
Embeds a locally accessible TrueType or OpenType font by name rather than location. You use the font name, and not the filename, for the font. For example, you specify "Akbar Bold Italic" rather than "AkbarBI.ttf". You can embed fonts that are locally accessible by the application server's Java Runtime Environment (JRE). These fonts include the *.ttf files in the jre/lib/fonts folder, fonts that are mapped in the jre/lib/font.properties file, and fonts that are made available to the JRE by the operating system (OS). On Windows, TTF files in the /windows/fonts directory (or /winnt/fonts) are available to the local function. On Solaris or Linux, fonts that are registered with a font server, such as xfs, are available. The font name that you specify is determined by the operating system. In general, you do not include the font file's extension, but this is OS-dependent. For more information, consult your operating system documentation. |
You must specify the url or local function of the src property in the @font-face declaration. All other properties are optional. In general, you should use url rather than local, because pointing to a file is more reliable than using a reference controlled by the operating system.
Do not mix embedded and nonembedded fonts in the same fontFamily property.
Embedding fonts in ActionScript
You can embed TrueType or OTF font files or system fonts by location or by name by using the [Embed] metadata tag in ActionScript. To embed a font by location, you use the source property in the [Embed] metadata tag. To embed a font by name, you use the systemFont property in the [Embed] metadata tag.
The following examples embed fonts by location by using the [Embed] tag syntax:
<?xml version="1.0"?>
<!-- fonts/EmbeddedFontFaceActionScriptByLocation.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
.mystyle1 {
fontFamily:myMyriadFont;
fontSize: 32pt;
}
.mystyle2 {
fontFamily:myBoldMyriadFont;
fontSize: 32pt;
fontWeight: bold;
}
</mx:Style>
<mx:Script>
/*
* Embed a font by location.
*/
[Embed(source='../assets/MyriadWebPro.ttf',
fontName='myMyriadFont',
mimeType='application/x-font'
)]
// You do not use this variable directly. It exists so that
// the compiler will link in the font.
private var font1:Class;
/*
* Embed a font with bold typeface by location.
*/
[Embed(source='../assets/MyriadWebPro-Bold.ttf',
fontWeight='bold',
fontName='myBoldMyriadFont',
mimeType='application/x-font',
advancedAntiAliasing='true'
)]
private var font2:Class;
</mx:Script>
<mx:Panel title="Embedded Fonts Using ActionScript">
<mx:VBox>
<mx:Label
width="100%"
height="75"
styleName="mystyle1"
text="This text uses the MyriadWebPro font."
rotation="15"
/>
<mx:Label
width="100%"
height="75"
styleName="mystyle2"
text="This text uses the MyriadWebPro-Bold font."
rotation="15"
/>
</mx:VBox>
</mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:
You use the value of the fontName property that you set in the [Embed] tag as the alias (fontFamily) in your style definition.
To embed a font with a different typeface (such as bold or italic), you specify the fontWeight or fontStyle properties in the [Embed] statement and in the style definition. For more information on embedding different typefaces, see Using multiple typefaces.
To show you that the example runs correctly, the Label controls are rotated. If the fonts were not correctly embedded, the text in the Label controls would disappear when you rotated the text.
To embed local or system fonts, you use the system font name rather than the filename for the font. You also specify that name using the systemFont property in the [Embed] tag rather than the source attribute. Otherwise, you use the same syntax, as the following example shows:
<?xml version="1.0"?>
<!-- fonts/EmbeddedFontFaceActionScriptByName.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
.mystyle1 {
fontFamily:myPlainFont;
fontSize: 32pt;
}
.mystyle2 {
fontFamily:myItalicFont;
fontSize: 32pt;
fontStyle: italic;
}
</mx:Style>
<mx:Script>
/*
* Embed a font by name.
*/
[Embed(systemFont='Myriad Web Pro',
fontName='myPlainFont',
mimeType='application/x-font'
)]
// You do not use this variable directly. It exists so that
// the compiler will link in the font.
private var font1:Class;
/*
* Embed a font with italic typeface by name.
*/
[Embed(systemFont='Myriad Web Pro',
fontStyle='italic',
fontName='myItalicFont',
mimeType='application/x-font',
advancedAntiAliasing='true'
)]
private var font2:Class;
</mx:Script>
<mx:Panel title="Embedded Fonts Using ActionScript">
<mx:VBox>
<mx:Label
width="100%"
height="75"
styleName="mystyle1"
text="This text uses the plain typeface."
rotation="15"
/>
<mx:Label
width="100%"
height="75"
styleName="mystyle2"
text="This text uses the italic typeface."
rotation="15"
/>
</mx:VBox>
</mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:
To get the system font name in Windows, install the Font properties extension. Then right-click the font's file in Windows Explorer and select the Names tab. Use the value under Font Family Name as the systemFont value.You can specify a subset of the font's character range by specifying the unicodeRange parameter in the [Embed] metadata tag or the @font-face declaration. Embedding a range of characters rather than using the default of all characters can reduce the size of the embedded font and, therefore, reduce the final output size of your SWF file. For more information, see Setting character ranges.
Using advanced anti-aliasing
When you embed fonts, you can use advanced anti-aliasing to provide those fonts with additional information about the font. Embedded fonts that use the advanced anti-aliasing information are typically clearer and appear sharper at smaller font sizes.
By default, fonts that you embed in Flex applications use the advanced anti-aliasing information. This default is set by the fonts.advanced-anti-aliasing compiler option in the flex-config.xml file (the default value is true). You can override this default value by setting the value in your style sheets or changing it in the configuration file. To disable advanced anti-aliasing in style sheets, you set the advancedAntiAliasing style property to false in your @font-face rule, as the following example shows:
@font-face {
src:url("../assets/MyriadWebPro.ttf");
fontFamily: myFontFamily;
advancedAntiAliasing: false;
}
Using advanced anti-aliasing can degrade the performance of your compiler. This is not a run-time concern, but can be noticeable if you compile your applications frequently or use the web-tier compiler. Using advanced anti-aliasing can also cause a slight delay when you load SWF files. You notice this delay especially if you are using several different character sets, so be aware of the number of fonts that you use. The presence of advanced anti-aliasing information may also cause an increase in the memory usage in Flash Player and Adobe® AIR™. Using four or five fonts, for example, can increase memory usage by approximately 4 MB.
When you embed fonts that use advanced anti-aliasing in your Flex applications, the fonts function exactly as other embedded fonts. They are anti-aliased, you can rotate them, and you can make them partially or wholly transparent.
Font definitions that use advanced anti-aliasing support several additional styles properties: fontAntiAliasType, fontGridFitType, fontSharpness, and fontThickness. These properties are all inheriting styles.
Because the advanced anti-aliasing-related style properties are CSS styles, you can use them in the same way that you use standard style properties, such as fontFamily and fontSize. For example, a text-based component could use subpixel-fitted advanced anti-aliasing of New Century 14 at sharpness 50 and thickness -35, while all Button controls could use pixel-fitted advanced anti-aliasing of Tahoma 10 at sharpness 0 and thickness 0. These styles apply to all the text in a TextField control; you cannot apply them to some characters and not others.
The default values for the advanced anti-aliasing styles properties are defined in the defaults.css file. If you replace this file or use another style sheet that overrides these properties, Flash Player and AIR use the standard font renderer to render the fonts that use advanced anti-aliasing. If you embed fonts that use advanced anti-aliasing, you must set the fontAntiAliasType property to advanced, or you lose the benefits of the advanced anti-aliasing information.
The following table describes these properties:
|
Style property |
Description |
|---|---|
|
fontAntiAliasType |
Sets the antiAliasType property of internal TextField controls. The valid values are normal and advanced. The default value is advanced, which enables advanced anti-aliasing for the font. Set this property to normal to prevent the compiler from using advanced anti-aliasing. This style has no effect for system fonts or fonts embedded without the advanced anti-aliasing information. |
|
fontGridFitType |
Sets the gridFitType property of internal TextField controls. The valid values are none, pixel, and subpixel. The default value is pixel. For more information, see the TextField and GridFitType classes in the Adobe Flex Language Reference. This property has the same effect as the gridFitType style property of the TextField control for system fonts, only it applies when you embed fonts with advanced anti-aliasing. Changing the value of this property has no effect unless the fontAntiAliasType property is set to advanced. |
|
fontSharpness |
Sets the sharpness property of internal TextField controls. The valid values are numbers from -400 to 400. The default value is 0. This property has the same effect as the fontSharpness style property on the TextField control for system fonts, only it applies when you embed fonts with advanced anti-aliasing. Changing the value of this property has no effect unless the fontAntiAliasType property is set to advanced. |
|
fontThickness |
Sets the thickness property of internal TextField controls. The valid values are numbers from -200 to 200. The default value is 0. This property has the same effect as the fontThickness style property on the TextField control for system fonts, only it applies when you embed fonts with advanced anti-aliasing. Changing the value of this property has no effect unless the fontAntiAliasType property is set to advanced. |
Detecting embedded fonts
You can use the SystemManager class's isFontFaceEmbedded() method to determine whether the font is embedded or whether it has been registered globally with the register() method of the Font class. The isFontFaceEmbedded() method takes a single argument--the object that describes the font's TextFormat--and returns a Boolean value that indicates whether the font family you specify is embedded, as the following example shows:
<?xml version="1.0"?>
<!-- fonts/DetectingEmbeddedFonts.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="determineIfFontFaceIsEmbedded()">
<mx:Style>
@font-face {
src: url(../assets/MyriadWebPro.ttf);
fontFamily: myPlainFont;
advancedAntiAliasing: true;
}
.myStyle1 {
fontFamily: myPlainFont;
fontSize:12pt
}
</mx:Style>
<mx:Script><![CDATA[
import mx.managers.SystemManager;
import flash.text.TextFormat;
public function determineIfFontFaceIsEmbedded():void {
var tf1:TextFormat = new TextFormat();
tf1.font = "myPlainFont";
var tf2:TextFormat = new TextFormat();
tf2.font = "Arial";
var b1:Boolean = Application.application.systemManager.
isFontFaceEmbedded(tf1);
var b2:Boolean = Application.application.systemManager.
isFontFaceEmbedded(tf2);
l1.text = tf1.font + " (" + b1 + ")";
l2.text = tf2.font + " (" + b2 + ")";
}
]]></mx:Script>
<mx:Text id="text1" styleName="myStyle1" text="Rotate Me"/>
<mx:HBox>
<mx:Button label="Rotate +1" click="++text1.rotation;"/>
<mx:Button label="Rotate -1" click="--text1.rotation;"/>
</mx:HBox>
<mx:Form>
<mx:FormItem label="isFontFaceEmbedded:">
<mx:Label id="l1"/>
</mx:FormItem>
<mx:FormItem label="isFontFaceEmbedded:">
<mx:Label id="l2"/>
</mx:FormItem>
</mx:Form>
</mx:Application>
The executing SWF file for the previous example is shown below:
You can use the Font class's enumerateFonts() method to output information about device or embedded fonts. The following example lists embedded fonts:
<?xml version="1.0"?>
<!-- fonts/EnumerateFonts.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="listFonts()">
<mx:Style>
@font-face {
src:url("../assets/MyriadWebPro.ttf");
fontFamily: myFont;
advancedAntiAliasing: true;
}
@font-face {
src:url("../assets/MyriadWebPro-Bold.ttf");
fontFamily: myFont;
fontWeight: bold;
advancedAntiAliasing: true;
}
@font-face {
src:url("../assets/MyriadWebPro-Italic.ttf");
fontFamily: myFont;
fontStyle: italic;
advancedAntiAliasing: true;
}
.myPlainStyle {
fontSize: 20;
fontFamily: myFont;
}
.myBoldStyle {
fontSize: 20;
fontFamily: myFont;
fontWeight: bold;
}
.myItalicStyle {
fontSize: 20;
fontFamily: myFont;
fontStyle: italic;
}
</mx:Style>
<mx:Script><![CDATA[
private function listFonts():void {
var fontArray:Array = Font.enumerateFonts(false);
for(var i:int = 0; i < fontArray.length; i++) {
var thisFont:Font = fontArray[i];
if (thisFont.fontType == "embedded") {
ta1.text += "FONT " + i + ":: name: " + thisFont.fontName + "; typeface: " +
thisFont.fontStyle + "; type: " + thisFont.fontType + "\n";
}
}
}
]]></mx:Script>
<mx:HBox borderStyle="solid">
<mx:Label text="Plain Label" styleName="myPlainStyle"/>
<mx:Label text="Bold Label" styleName="myBoldStyle"/>
<mx:Label text="Italic Label" styleName="myItalicStyle"/>
</mx:HBox>
<mx:TextArea id="ta1" height="200" width="400"/>
</mx:Application>
The executing SWF file for the previous example is shown below:
The following list shows the output.
name: myFont; typeface: regular; type: embedded name: myFont; typeface: bold; type: embedded name: myFont; typeface: italic; type: embedded
The enumerateFonts() method takes a single Boolean argument: enumerateDeviceFonts. The default value of the enumerateDeviceFonts property is false, which means it returns an Array of embedded fonts by default.
If you set the enumerateDeviceFonts argument to true, the enumerateFonts() method returns an array of available device fonts on the client system, but only if the client's mms.cfg file sets the DisableDeviceFontEnumeration property to 0, the default value. If you set the DisableDeviceFontEnumeration property to 1, Flash Player cannot list device fonts on a client computer unless you explicitly configure the client to allow it. For more information about configuring the client with the mms.cfg file, see the Flash Player documentation.
DashLine.zip
sheesh, it’s been one of those days.
flexlib - 2.5 - flex4.zip
