Setting
ranges in font-face declarations
Setting
language ranges in flex-config.xml
Detecting
available ranges
By specifying a range (or subset) of characters that compose the face of an embedded font, you reduce the size of an embedded font. Each character in a font that you use 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. 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.
The syntax for setting a character range is as follows:
U+[beginning of range]-[end of range];
For example:
U+0041-005A
You can also use wild cards Unicode range syntax; for example:
U+00??
This is the same as U+0000-00FF.
You can also refer to a single character without a range; for example:
U+0041
Finally, you can specify a list of ranges by using a comma separator; for example:
U+0041,U+0043-00FF,U+0045
If you use a character that is outside of the declared range, Flex displays a device font for that character (for FTE-based controls) or a blank character (for non-FTE-based controls). For more information on setting character ranges in applications built with
Flex, 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 that you create with Flash or the fontswf utility, you should set the character range to include only those characters that you need to keep the size of the SWF file as small as possible. For information about using the fontswf
utility, see Using the fontswf utility.
Setting ranges in font-face declarations
You can set the range of embedded characters in an application 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 <fx:Style> tag:
<?xml version="1.0"?>
<!-- fonts/EmbeddedFontCharacterRange.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@font-face {
src:url("../assets/MyriadWebPro.ttf");
fontFamily: myFontFamily;
embedAsCFF: true;
unicodeRange:
U+0041-005A, /* Upper-Case [A..Z] */
U+0061-007A, /* Lower-Case a-z */
U+0030-0039, /* Numbers [0..9] */
U+002E-002E; /* Period [.] */
}
s|RichText {
fontFamily: myFontFamily;
fontSize: 32;
}
</fx:Style>
<s:Panel title="Embedded Font Character Range">
<s:RichText width="400" height="150">
<s:text>The Text
e6ec
Uses Only Some of Available Characters 0 1 2 3 4 5 6 7 8 9.</s:text>
</s:RichText>
</s:Panel>
</s:Application>The executing SWF file for the previous example is shown below:
Setting language 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 named ranges in the flex‑config.xml file:
<fonts>
<languages>
<language-range>
<lang>englishRange</lang>
<range>U+0020-007E</range>
</language-range>
<language-range>
<lang>lowerCaseEnglish</lang>
<range>U+0061-007A</range>
</language-range>
<languages>
</fonts>
In your style sheet, 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");
unicodeRange: "englishRange";
embedAsCFF: true;
}
Flex includes a file that lists convenient mappings of the Flash UnicodeTable.xml character ranges for use in the Flex configuration file. For the Flex SDK, the file is located atflex_install_dir/frameworks/flash-unicode-table.xml. For
Adobe LiveCycle Data Services ES, the file is located at flex_app_root/WEB-INF/flex/flash-unicode-table.xml.
The following example shows the predefined range Latin 1:
<language-range>
<lang>Latin I</lang>
<range>U+0020,U+00A1-00FF,U+2000-206F,U+20A0-20CF,U+2100-2183</range>
</language-range>
To make ranges listed in the flash-unicode-table.xml file available in your 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 an embedded
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 -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="checkCharacterSupport();"
>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Style>
@font-face {
font-family: myABFont;
src:url("../assets/MyriadWebPro.ttf");
/*
* Limit range to the characters A and B.
*/
unicodeRange: U+0041-0042;
embedAsCFF: true;
}
@font-face {
font-family: myWideRangeFont;
src:url("../assets/MyriadWebPro.ttf");
/*
* Set range to the 128 characters in
* the Basic Latin block.
*/
unicodeRange: U+0041-007F;
embedAsCFF: true;
}
</fx:Style>
<fx: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";
}
}
}
]]></fx:Script>
<s:VGroup>
<s:RichText>
<s:text>myABFont unicodeRange: U+0041-0042 (characters A and B)</s:text>
</s:RichText>
<s:RichText>
<s:text>myWideRangeFont unicodeRange: U+0041-007F (Basic Latin chars)</s:text>
</s:RichText>
<s:Label text="Glyphs: DHARMA"/>
<s:RichText id="ta1" height="150" width="300"/>
</s:VGroup>
</s:Application>The executing SWF file for the previous example is shown below:
|
