When you declare a device font, you should declare a list of fonts you'd like to use in order of preference. The last item in the list should be a generic device font name that selects a font based on what's available on the client system.

This CSS declaration sets the fontFamily style as a list with a first preference of Helvetica and a last preference of the generic font family _sans:

<mx:Style>
    Label, Text {
      font-family:Helvetica, Arial, "_sans";
    }
</mx:Style>

The first choice, Helvetica, is typically available on Mac OS X, but not on Windows. If that font isn't found by Flash Player on the client system, it then looks for the second choice, Arial, which is installed by default on both Windows and Mac OS X. The final choice, _sans, refers to the general family of sans serif fonts. If Flash Player doesn't find either of the first two choices, it uses the client system's default font of that family.

Three generic device font names are recognized by Flash Player:

When you embed a font in a Flex application, you guarantee that the font will be available to the client system.

Embedded fonts offer great advantages to graphic designers:

Embedded fonts have these limitations:

Declaring embedded fonts with CSS

You can embed a font with the @font-face style selector in an embedded or external style sheet. This selector supports all font styles listed previously, plus these additional style names:

Each embedded font declaration must include the fontFamily to create an alias by which the embedded font will be referenced in the rest of the application and either src:local or src:url to designate the font to embed.

Embedding by font file location

You can embed a font that you haven't installed in your operating system by referring to the font by its file location. Font files can be referred to from anywhere in your file system, but for convenience you should copy the font file somewhere in your project and then refer to it with a relative file location.

This @font-face declaration embeds a font by its filename and assigns a fontFamily of Goudy:

@font-face {
  src:url("../fonts/GOUDOS.TTF");
  font-family:"Goudy";
}

After the font has been embedded, you can use the fontFamily style to use the font in a particular text control with an inline style declaration or in a set of controls with a style selector. This Label control uses the embedded font:

<mx:Label fontFamily="Goudy" text="An embedded font"/>

This type selector assigns the embedded font to Label and Text controls:

<mx:Style>
  Label, Text {
    font-family: Goudy;
  }
</mx:Style>

Embedding font variations with font files

Fonts that support variations in presentation such as bold and italics are delivered as individual font files. When embedding a font by its filename, you must declare each variation with a separate @font-face selector. If you set all of a font's selectors with the same fontFamily, you can then refer to the individual fonts from an inline style declaration or a style selector by simply including the appropriate font style.

These @font-face declarations embed all three of a font's available variations and assign the same fontFamily to each. The font-weight and font-style settings in each @font-face selector determine when each font file will be used.

The application in Listing 11.1 uses the Goudy font with all its variations and a set of Label controls that use the font in multiple sizes and variations of appearance.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  backgroundColor="white" verticalGap="0">
  <mx:Style>
    @font-face {
      src:url("../fonts/GOUDOS.ttf");
      font-family:"Garamond";
    }
    @font-face {
      src:url("../fonts/GOUDOSB.ttf");
      font-family:"Goudy Old Style";
      font-weight:bold;
    }
    @font-face {
      src:url("../fonts/GOUDOSI.ttf");
      font-family:"Goudy Old Style";
      font-style:italic;
    }
  </mx:Style>
  <mx:Label text="Goudy Old Style 18"
    fontFamily="Goudy Old Style" fontSize="18"/>
  <mx:Label text="Goudy Old Style 30"
    fontFamily="Goudy Old Style" fontSize="30"/>

<mx:Label text="Goudy Old Style 72"
    fontFamily="Goudy Old Style" fontSize="72"/>
  <mx:Label text="Goudy Old Style italic"
    fontFamily="Goudy Old Style" fontSize="72" fontStyle="italic"/>
  <mx:Label text="Goudy Old Style bold"
    fontFamily="Goudy Old Style" fontSize="72" fontWeight="bold"/>
</mx:Application></mx:Application>

Embedding by system font name

To embed a font that's been installed in the operating system, use the src:local style and refer to the font by its system name. The font's system name is usually the same as the font filename (without the file extension), but to be sure of the system name, you can open the font file and view the system name information. Figure 11.1 shows a font file displayed in Windows XP and the font's system name.

Figure 11.1. A font file displayed in Windows XP with the font's system name

This declaration embeds a font using the font's system name after the font has been installed in the operating system:

@font-face {
  src:local("Goudy Old Style");
  font-family:"Goudy";
}

As with a declaration by font filename, the font-family style determines the name by which the font is known in the rest of the application. This Label control uses the embedded font:

<mx:Label text="Goudy Font" fontFamily="Goudy"/>

Embedding font variations with system font names

When you embed by system font name, you still have to declare each font variation individually, but you can use the same system font name and font-family for each declaration, and you distinguish each by the use of the font-weight or font-style declarations. The application in Listing 11.2 declares the Goudy font with the system font name and then uses the font in a set of text controls.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  backgroundColor="white">
  <mx:Style>
    @font-face {
      src:local("Goudy Old Style");
      font-family:"Goudy";
    }
    @font-face {
      src:local("Goudy Old Style");
      font-family:"Goudy";
      font-weight:bold;
    }
    @font-face {
      src:local("Goudy Old Style");
      font-family:"Goudy";

font-style:italic;
    }
    </mx:Style>
    <mx:Text text="Goudy 10" fontFamily="Goudy" fontSize="10"/>
    <mx:Text text="Goudy 18" fontFamily="Goudy" fontSize="18"/>
    <mx:Text text="Goudy 30" fontFamily="Goudy" fontSize="30"/>
    <mx:Text text="Goudy italic" fontFamily="Goudy" fontSize="72"
    fontStyle="italic"/>
    <mx:Text text="Goudy bold" fontFamily="Goudy" fontSize="72"
    fontWeight="bold"/>
</mx:Application>

Figure 11.2 shows the application using the embedded font. The application's appearance is the same regardless of whether the fonts are embedded with file or system names.

Figure 11.2. A Flex application using an embedded font

Embedding fonts with Flex Builder's Design view

Flex Builder 3's enhanced Design view can generate a certain amount of CSS code to declare an embedded font. These generated declarations are always created in an external style sheet and represent only the base font style (and not any variations such as font weight or style).

Follow these steps to create an external style sheet with an embedded font declaration:

Listing 11.4 shows the contents of the completed style sheet.

Label {
  fontFamily: "Comic Sans MS";
}
@font-face
{
  fontFamily: "Comic Sans MS";
  fontWeight: normal;
  fontStyle: normal;
  src: local("Comic Sans MS");
}
@font-face
{
  fontFamily: "Comic Sans MS";
  fontWeight: bold;
  fontStyle: normal;
  src: local("Comic Sans MS");
}

Follow these steps to use the generated styles in a Flex application:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   layout="vertical"
  backgroundColor="#eeeeee">
  <mx:Style source="fontStyles.css"/>
  <mx:Label text="Embedded font normal"/>
  <mx:Label text="Embedded font bold" fontWeight="bold"/>
</mx:Application>

As shown in Figure 11.5, you should see that the two Label controls use the normal and bold variations of the selected typeface.

Figure 11.5. An application showing two variations of an embedded font

Embedding ranges of characters in CSS

When you embed a typeface, you significantly increase the size of the compiled Flex application. For example, in the previous example where two font files were embedded in the application, the compiled debug version of the application increased in size from 152,533 bytes to 308,776 bytes, or roughly twice the original size. This is because font definition files contain font outlines for every possible character, frequently including outlines for non-Latin characters that you might never use in your application.

You can restrict which characters of a typeface are embedded in your application by declaring the unicodeRange style. This style takes an array of range designators, each starting and ending with a Unicode character in hexadecimal code.

The following declaration embeds a broad range of basic Latin Unicode characters that would normally be used in an English language Flex application. The Unicode range of U+0021, representing the exclamation point (!),through U+007E, representing the the tilde (~) includes all uppercase and lowercase alpha characters, numeric characters, and most common punctuation:

@font-face
{
  fontFamily: "Comic Sans MS";
  src: local("Comic Sans MS");
  unicodeRange:U+0021-U+007E;
}

After adding this unicodeRange setting to both embedded fonts in the preceding example, the compiled application in the release build is 174,954 bytes-a bit larger than the application without any embedded fonts (152,533 bytes), but significantly smaller than the version with both fonts embedded with all their character outlines (308,776 bytes). The result is an application that downloads and installs more quickly, but still has all the text display functionality you need.

For European languages such as French, where an extended Latin alphabet is required, you can add additional ranges of characters that include versions of the Latin alphabet characters with accents and other required annotations. This style declaration embeds both the set of characters known in Unicode as Basic Latin and another set of characters known as Latin Extended A:

@font-face
{
  fontFamily: "Comic Sans MS";

src: local("Comic Sans MS");
  unicodeRange:
    U+0021-U+007E, //Basic Latin
    U+0100-U+017F; //Latin Extended A
}

Declaring embedded fonts with ActionScript

You also can embed fonts with the ActionScript [Embed] metadata tag by either font location or system name. The [Embed] tag must be placed inside an <mx:Script> tag set and include either a source attribute for fonts embedded by filename or a systemFont attribute for fonts embedded by system name.

An [Embed] declaration also requires these attributes:

The [Embed] tag is always followed by a variable declaration typed as Class. This variable is never accessed directly in ActionScript code, so its name can be anything you like. This [Embed] tag embeds a font by filename and assigns a fontName of myEmbeddedFont:

[Embed(source='../fonts/MyCustomFont.ttf',
  fontName='myEmbeddedFont',
  mimeType='application/x-font')]
private var font1:Class;

A font that's been installed in the operating system can be embedded using the system font name instead of the filename:

[Embed(systemName='MyCustomFont',
  fontName='myEmbeddedFont',
  mimeType='application/x-font')]
private var font1:Class;

In either case, you then use the font in a text control by assigning the fontFamily style to the new font name:

<mx:Label fontFamily="myEmbeddedFont" text="An embedded font"/>

Declaring embedded fonts in ActionScript gives you the same benefits as CSS declarations and has the same requirements:

You can rotate a text control that uses an embedded font with the control's rotation property. The value of the rotation property defaults to 0 (indicating standard control layout). A positive value from 1 to 180 indicates that the control is rotated clockwise, while a negative value from −1 to −180 causes the control to rotate counter-clockwise. Values outside these ranges are added to or subtracted from 360 to get a valid value.

The code in Listing 11.6 embeds a system font and then uses the font in a control that's rotated 90 degrees counter-clockwise to turn the control on its side.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
      layout="absolute"
     backgroundColor="white">

<mx:Style>
      @font-face {
        src:local("Comic Sans MS");
        font-family:"Comic";
        unicodeRange:U+0041-U+007E;
    }
  </mx:Style>
  <mx:Label id="rotatedControl" text="Rotated Text" fontFamily="Comic"
    rotation="-90" top="{rotatedControl.width + 10}" left="10"
    fontSize="36"/>
</mx:Application>

Figure 11.6 shows the resulting application, with the control placed in the application's upper-left corner.

Figure 11.6. A rotated control using an embedded font

When you rotate a visual control, its calculated upper-left corner is still based on the control's virtual position when it isn't rotated. A Flash developer would refer to this as the object's "registration point"-the point in the object from which its x and y properties are calculated. The position of the x/y coordinate doesn't change for Flex visual controls, even when the object's font is rotated at runtime.

To properly place such a control, you need to take into account the x and y properties and their true meaning. The top property's calculation used in Listing 11.6 binds to the control's width and uses this value to offset itself vertically. If you place the rotated control in an application with absolute layout, as shown in Listing 11.6, in Design view it appears to run off the screen, as shown in Figure 11.7. At runtime, the top property is calculated correctly and the object is positioned 10 pixels from the top of the application.

Figure 11.7. A control's virtual and runtime display positions, shown in Flex Builder's Design view

The rotation property can be set at runtime through bindings or through ActionScript statements. The code in Listing 11.7 binds a Label control's rotation property to a Slider control's value. As the user manipulates the Slider, the Label rotates.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   layout="absolute"
  backgroundColor="white">
  <mx:Style>
    @font-face {

src:local("Comic Sans MS");
    font-family:"Comic";
    unicodeRange:U+0041-U+007E;
    }
  </mx:Style>

  <mx:VSlider id="mySlider"
    top="10" left="10" height="150"
    minimum="-180" maximum="180" value="0"
    tickInterval="45" snapInterval="45"/>

  <mx:Label id="rotatedControl" text="Rotated Text" fontFamily="Comic"
    rotation="{mySlider.value}" top="{this.height / 2}"
    left="{this.width / 2}" fontSize="18" liveDragging="true"/>

</mx:Application>

Figure 11.8 shows the resulting application, with the control rotated based on the Slider control's current value.

Figure 11.8. As the user manipulates the Slider control, the Label control's rotation property updates based on the binding expression.

Advanced anti-aliasing refers to the ability of Flash Player to make embedded fonts more readable by smoothing the font's edges during the rendering process. When you embed a font, its fontAntiAliasType style is set to advanced by default. If you don't want to use this feature on a particular font, set the style's value to normal in the embedding declaration:

@font-face {
  src:source("Garamond");
  font-family:"GaramondWithoutAntialiasing";
  font-anti-alias-type:normal;
}

When advanced anti-aliasing is enabled, you can set these styles to effect the font's presentation:

The code in Listing 11.8 creates an application with two embedded versions of the Garamond font. The first embedded font supports advanced anti-aliasing, while the second has the style set to normal. The two Label controls use the different embedded fonts. The control with advanced anti-aliasing enabled uses the fontSharpness and fontThickness styles.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  backgroundColor="white" verticalGap="0">
  <mx:Style>
    @font-face {
      src:source("Garamond");
      font-family:"GaramondWithAntialiasing";
      font-anti-alias-type:advanced;
    }
    @font-face {
      src:source("Garamond");
      font-family:"GaramondWithoutAntialiasing";
      font-anti-alias-type:normal;

}
  </mx:Style>
  <mx:Label text="Garamond with Advanced Antialiasing"
    fontFamily="GaramondWithAntialiasing" fontSize="24"
    fontSharpness="-400" fontThickness="0"/>
  <mx:Label text="Garamond without Advanced Antialiasing"
    fontFamily="GaramondWithoutAntialiasing" fontSize="24"/>
</mx:Application>

Figure 11.9 shows the resulting application. The first Label control has smoother, fuzzier edges created by the advanced antialiasing, while the second shows the control's default appearance with a sharper appearance.

Figure 11.9. Label controls with and without advanced anti-aliasing

You can create a formatter with either MXML or ActionScript. When declaring the class in ActionScript, you use the class name in an MXML declaration:

<mx:DateFormatter id="myDateFormatter"/>

To instantiate a formatter class in ActionScript, declare and instantiate a variable typed as the appropriate formatter class. Flex Builder should create an import statement for the class; if not, create it manually:

import mx.formatters.DateFormatter;
var myDateFormatter:DateFormatter = new DateFormatter();

Each formatter class has its own set of properties that determine how it formats strings. The DateFormatter, for example, has a single formatString property that can be used to create a custom date format. The formatString property takes as its value a string consisting of masking tokens, combined with literal strings. Table 11.1 describes the tokens that can be used in a DateFormatter object's formatString property.

All text used in a dateFormat property other than the supported tokens is considered to be literal text. For example, a formatString of "EEEE, MMMM D, YYYY" on the first day of 2008 returns "Tuesday, January 1, 2008". The comma and space characters in the formatting string are returned along with the token replacements.

In contrast, the CurrencyFormatter and NumberFormatter classes have properties that affect thousand separators and decimal characters, the number of characters after a decimal, selection and placement of a currency symbol, and numeric rounding. The ZipCodeFormatter and PhoneFormatter classes have properties that affect the formatting of those values.

You can use a formatter class in a binding expression to change how a value is displayed in a text control. Follow these steps:

The application in Listing 11.9 uses a DateFormatter to format the selectedDate property of a DateChooser control.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  backgroundColor="white">
  <mx:DateFormatter id="myDateFormatter" formatString="EEEE, MMMM D,
    YYYY"/>
  <mx:DateChooser id="myDateChooser"/>
  <mx:Label fontSize="18"
    text="Selected date: {myDateFormatter.format(
      myDateChooser.selectedDate)}" />
</mx:Application>

Figure 11.10 shows the resulting application with the Label control displaying the date value's formatted string.

Figure 11.10. A formatted date value displayed in a Label control

You may want to use a single formatting rule throughout an application. When you create a formatter class for each view component in an application, it can become cumbersome to update all the formatter object's formatting values when they have to be changed.

You can solve this by wrapping a formatter object in a static method that can be called from anywhere in an application. The nature of a static method is that it behaves the same in all circumstances, and it can be called from its class without having to first instantiate the class.

The code in Listing 11.10 shows a class with a static formatDate() method. The method accepts a value argument typed as an ActionScript Object so that the method can accept either a true date or a string that can be parsed as a date. It then instantiates the DateFormatter class local to the function, sets its formatString property to control the output, and returns a formatted value.

package utilities
{
  import mx.formatters.DateFormatter;
  public class FormatUtilities
  {
    public static function dateFormat(value:Object):String
    {
      var df:DateFormatter = new DateFormatter();
      df.formatString = "EEEE, MMMM D, YYYY";
      return df.format(value)
    }
    }
}

To use this static method in an application or component, follow these steps:

The code in Listing 11.11 uses the static method to format the date value.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  backgroundColor="white">
  <mx:Script>
    <![CDATA[
      import utilities.FormatUtilities;
    ]]>
  </mx:Script>
  <mx:DateChooser id="myDateChooser"/>
  <mx:Label text="Selected date: {FormatUtilities.dateFormat(
      myDateChooser.selectedDate)}"
    fontSize="18"/>
</mx:Application>

When you use a static method to wrap formatting functionality, it becomes possible to change formatting rules for the entire application from a single source code file. The result is an application that's easier to maintain.