Adobe Flex 3 Help

Advanced text rendering

ActionScript 3.0 provides a variety of classes in the flash.text package to control the properties of displayed text, including embedded fonts, anti-aliasing settings, alpha channel control, and other specific settings. The Flex ActionScript Language Reference provides detailed descriptions of these classes and properties, including the CSMSettings, Font, and TextRenderer classes.

Subtopics



Using embedded fonts

When you specify a specific font for a TextField in your application, Flash Player or AIR will look for a device font (a font that resides on the user's computer) with the same name. If it doesn't find that font on the user's system, or if the user has a slightly different version of a font with that name, the text display could look very different from what you intend.

To make sure the user sees exactly the right font, you can embed that font in your application's SWF file. Embedded fonts have a number of benefits:

  • Embedded font characters are anti-aliased, making their edges appear smoother, especially for larger text.
  • You can rotate text that uses embedded fonts.
  • Embedded font text can be made transparent or semitransparent.
  • You can use the kerning CSS style with embedded fonts.

The biggest limitation to using embedded fonts is that they increase the file size or download size of your application.

The exact method of embedding a font file into your application's SWF file varies according to your development environment.

Once you have embedded a font you can make sure a TextField uses the correct embedded font:

  • Set the embedFonts property of the TextField to true.
  • Create a TextFormat object, set its fontFamily property to the name of the embedded font, and apply the TextFormat object to the TextField. When specifying an embedded font, the fontFamily property should only contain a single name; it cannot use a comma-delimited list of multiple font names.
  • If using CSS styles to set fonts for TextFields or components, set the font-family CSS property to the name of the embedded font. The font-family property must contain a single name and not a list of names if you want to specify an embedded font.

Embedding a font in Flex

There are many ways to embed fonts in a Flex application, including:

  • Using the [Embed] metadata tag in a script
  • Using the @font-face style declaration
  • Establish a class for the font and use the [Embed] tag to embed it, as described in Embedded asset classes.

For more details about how to embed fonts in Flex applications, see "Using embedded fonts" in the Flex Developer Guide.

You can only embed True Type fonts directly in a Flex application. Fonts in other formats like Type 1 Postscript fonts can first be embedded in a Flash SWF file using the Flash authoring tool and then that SWF file can be used in your Flex application. For more details about using embedded fonts from SWF files in Flex, see "Embedding fonts from SWF files" in the Flex Developer Guide.

Controlling sharpness, thickness, and anti-aliasing

By default, Flash Player or AIR determines the settings for text display controls like sharpness, thickness, and anti-aliasing as text resizes, changes color, or is displayed on various backgrounds. In some cases, like when you have very small or very large text, or text on a variety of unique backgrounds, you may want to maintain your own control over these settings. You can override the Flash Playeror AIR settings using the flash.text.TextRenderer class and its associated classes, like the CSMSettings class. These classes give you precise control over the rendering quality of embedded text. For more information about embedded fonts, see Using embedded fonts.

Note: The flash.text.TextField.antiAliasType property must have the value AntiAliasType.ADVANCED in order for you to set the sharpness, thickness, or the gridFitType property, or to use the TextRenderer.setAdvancedAntiAliasingTable() method.

The following example applies custom continuous stroke modulation (CSM) properties and formatting to displayed text using an embedded font called myFont. When the user clicks on the displayed text, Flash Player applies the custom settings:

var format:TextFormat = new TextFormat();
format.color = 0x336699;
format.size = 48;
format.font = "myFont";

var myText:TextField = new TextField();
myText.embedFonts = true;
myText.autoSize = TextFieldAutoSize.LEFT;
myText.antiAliasType = AntiAliasType.ADVANCED;
myText.defaultTextFormat = format;
myText.selectable = false;
myText.mouseEnabled = true;
myText.text = "Hello World";
addChild(myText);
myText.addEventListener(MouseEvent.CLICK, clickHandler);

function clickHandler(event:Event):void
{
    var myAntiAliasSettings = new CSMSettings(48, 0.8, -0.8);
    var myAliasTable:Array = new Array(myAntiAliasSettings);
    TextRenderer.setAdvancedAntiAliasingTable("myFont", FontStyle.ITALIC, TextColorType.DARK_COLOR, myAliasTable);
}