Setting character ranges
By specifying a range of symbols that compose the face of an embedded font, you reduce the size of an embedded font. Each character in a font must be described; removing some of these characters reduces the overall size of the description information that Flex must include for each embedded font.
You can set the range of glyphs in the flex-config.xml file or in the font-face declaration in each MXML file. You specify individual characters or ranges of characters using the Unicode values for the characters, and you can set multiple ranges for each font declaration.
If you use a character that is outside of the declared range, Flex displays nothing for that character. For more information on setting character ranges in Flex applications, see the CSS-2 Fonts specification at www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#descdef-unicode-range.
If you embed a font from a SWF file, you can restrict the character range in Flash. For more information, see Embedding fonts from SWF files.
Setting ranges in font-face declarations
You can set the range of allowable characters in an MXML file by using the unicodeRange property of the @font-face declaration. The following example embeds the Myriad Web Pro font and defines the range of characters for the font in the <mx:Style> tag:
<?xml version="1.0"?>
<!-- fonts/EmbeddedFontCharacterRange.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
@font-face {
src:url("../assets/MyriadWebPro.ttf");
fontFamily: myFontFamily;
advancedAntiAliasing: true;
unicodeRange:
U+0041-U+005A, /* Upper-Case [A..Z] */
U+0061-U+007A, /* Lower-Case a-z */
U+0030-U+0039, /* Numbers [0..9] */
U+002E-U+002E; /* Period [.] */
}
TextArea {
fontFamily: myFontFamily;
fontSize: 32;
}
</mx:Style>
<mx:Panel title="Embedded Font Character Range">
<mx:TextArea width="400" height="150">
<mx:text>
The Text Uses Only Some of Available Characters
0 1 2 3 4 5 6 7 8 9.
</mx:text>
</mx:TextArea>
</mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:
Setting ranges in flex-config.xml
You can specify the language and character range for embedded fonts in the flex-config.xml file by using the <language-range> child tag. This lets you define the range once and use it across multiple @font-face blocks.
The following example creates an englishRange and an otherRange named ranges in the flex-config.xml file:
<fonts>
<languages>
<language-range>
<lang>englishRange</lang>
<range>U+0020-U+007E</range>
</language-range>
<language-range>
<lang>otherRange</lang>
<range>U+00??</range>
</language-range>
<languages>
</fonts>
In your MXML file, you point to the defined ranges by using the unicodeRange property of the @font-face declaration, as the following example shows:
@font-face {
fontFamily: myPlainFont;
src: url("../assets/MyriadWebPro.ttf");
advancedAntiAliasing: true;
unicodeRange: "englishRange";
}
Flex includes a file that lists convenient mappings of the Flash UnicodeTable.xml character ranges for use in the Flex configuration file. For Adobe LiveCycle Data Services ES, the file is located at flex_app_root/WEB-INF/flex/flash-unicode-table.xml; for Adobe Flex SDK, the file is located at flex_install_dir/frameworks/flash-unicode-table.xml.
The following example shows the predefined range Latin 1:
<language-range>
<lang>Latin I</lang>
<range>U+0020,U+00A1-U+00FF,U+2000-U+206F,U+20A0-U+20CF,U+2100-U+2183</range>
</language-range>
To make ranges listed in the flash-unicode-table.xml file available in your Flex applications, copy the ranges from this file and add them to the flex-config.xml files.
Detecting available ranges
You can use the Font class to detect the available characters in a font. You do this with the hasGlyphs() method.
The following example embeds the same font twice, each time restricting the font to different character ranges. The first font includes support only for the letters A and B. The second font family includes all 128 glyphs in the Basic Latin block.
<?xml version="1.0"?>
<!-- charts/CharacterRangeDetection.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="checkCharacterSupport();"
>
<mx:Style>
@font-face{
font-family: myABFont;
advancedAntiAliasing: true;
src:url("../assets/MyriadWebPro.ttf");
/*
* Limit range to the letters A and B.
*/
unicodeRange: U+0041-U+0042;
}
@font-face{
font-family: myWideRangeFont;
advancedAntiAliasing: true;
src:url("../assets/MyriadWebPro.ttf");
/*
* Set range to the 128 characters in
* the Basic Latin block.
*/
unicodeRange: U+0041-U+007F;
}
</mx:Style>
<mx:Script><![CDATA[
public function checkCharacterSupport():void {
var fontArray:Array = Font.enumerateFonts(false);
for(var i:int = 0; i < fontArray.length; i++) {
var thisFont:Font = fontArray[i];
if (thisFont.hasGlyphs("DHARMA")) {
ta1.text += "The font '" + thisFont.fontName +
"' supports these glyphs.\n";
} else {
ta1.text += "The font '" + thisFont.fontName +
"' does not support these glyphs.\n";
}
}
}
]]></mx:Script>
<mx:Text>
<mx:text>
myABFont unicodeRange: U+0041-U+0042 (letters A and B)
</mx:text>
</mx:Text>
<mx:Text>
<mx:text>
myWideRangeFont unicodeRange: U+0041-U+007F (Basic Latin chars)
</mx:text>
</mx:Text>
<mx:Label text="Glyphs: DHARMA"/>
<mx:TextArea id="ta1" height="150" width="300"/>
</mx:Application>
The executing SWF file for the previous example is shown below: