| Flex 2 Developer's Guide > Customizing the User Interface > Using Fonts > Using embedded fonts > Embedding fonts in ActionScript | |||
|
|||
|
|||
|
|||
You can embed TTF 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',
flashType='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="The text uses the MyriadWebPro font."
rotation="15"
/>
<mx:Label
width="100%"
height="75"
styleName="mystyle2"
text="The text uses the MyriadWebPro-Bold font."
rotation="15"
/>
</mx:VBox>
</mx:Panel>
</mx:Application>
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 attributes 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 attribute 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',
flashType='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="The text uses the plain typeface."
rotation="15"
/>
<mx:Label
width="100%"
height="75"
styleName="mystyle2"
text="The text uses the italic typeface."
rotation="15"
/>
</mx:VBox>
</mx:Panel>
</mx:Application>
|
TIP |
|
To get the system font name in Windows, install the Font properties extension. Then right-click on the font's file in Windows Explorer and select the Names tab. Use the value under Font Family Name as the |
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.
When you embed fonts, you can use FlashType hinting to provide those fonts with additional information about the font. Embedded fonts that use the FlashType hinting information are typically clearer and appear sharper at smaller font sizes.
By default, fonts that you embed in Flex applications use the FlashType hinting information. This default is set by the fonts.flash-type 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 FlashType hinting in style sheets, you set the flashType style property to false in your @font-face rule, as the following example shows:
@font-face {
src:url("../assets/MyriadWebPro.ttf");
fontFamily: myFontFamily;
flashType: false;
}
Using FlashType hinting 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 request-time compiler supported by Flex Data Services. Using FlashType hinting can also cause a slight delay when loading 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 FlashType hinting information may also cause an increase in the memory usage in Flash Player. Using four or five fonts, for example, can increase memory usage by approximately 4 MB.
When you embed fonts that use FlashType hinting 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 FlashType hinting supports several additional styles properties: fontAntiAliasType, fontGridFitType, fontSharpness, and fontThickness. These properties are all inheriting styles.
Because the FlashType-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 FlashType hinting of New Century 14 at sharpness 50 and thickness -35, while all Buttons could use pixel-fitted FlashType hinting of Tahoma 10 at sharpness 0 and thickness 0. These styles apply to all the text in a TextField; you cannot apply them to some characters and not others.
The default values for the FlashType 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 uses the standard font renderer to render the fonts that use FlashType hinting. If you embed fonts that use FlashType hinting, you must set the fontAntiAliasType property to advanced, or you lose the benefits of the FlashType hinting information.
The following table describes these properties:
|
Style property |
Description |
|---|---|
|
|
Sets the Set this property to This style has no effect for system fonts or fonts embedded without the FlashType hinting information. |
|
|
Sets the This property has the same effect as the Changing the value of this property has no effect unless the |
|
|
Sets the This property has the same effect as the Changing the value of this property has no effect unless the |
|
|
Sets the This property has the same effect as the Changing the value of this property has no effect unless the |
You can use the SystemManager's isFontFaceEmbedded() method to determine if the font is embedded or if 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;
flashType: 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:Button label="Rotate +1" click="++text1.rotation;"/>
<mx:Button label="Rotate -1" click="--text1.rotation;"/>
<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>
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;
flashType: true;
}
@font-face {
src:url("../assets/MyriadWebPro-Bold.ttf");
fontFamily: myFont;
fontWeight: bold;
flashType: true;
}
@font-face {
src:url("../assets/MyriadWebPro-Italic.ttf");
fontFamily: myFont;
fontStyle: italic;
flashType: true;
}
.myPlainStyle {
fontSize: 32;
fontFamily: myFont;
}
.myBoldStyle {
fontSize: 32;
fontFamily: myFont;
fontWeight: bold;
}
.myItalicStyle {
fontSize: 32;
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") {
trace("name: " + thisFont.fontName +
"; typeface: " + thisFont.fontStyle +
"; type: " + thisFont.fontType);
}
}
}
]]></mx:Script>
<mx:VBox>
<mx:Label text="Plain Label" styleName="myPlainStyle"/>
<mx:Label text="Italic Label" styleName="myBoldStyle"/>
<mx:Label text="Bold Label" styleName="myItalicStyle"/>
</mx:VBox>
</mx:Application>
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 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.
Flex 2.01
