jump to navigation

Using embedded fonts in Flex3 August 29, 2010

Posted by Tournas Dimitrios in Flex.
trackback

When you compile a Flex application, the application stores the names of the fonts that you used to create the text. Adobe® Flash® Player 9 uses the font names to locate identical or similar fonts on the user’s system when the Flex application runs. You can also embed fonts in the Flex application so that the exact font is used, regardless of whether the client’s system has that font.

Embedded fonts have the following benefits:

  • Client environment does not need the font to be installed.
  • Embedded fonts are anti-aliased, which means that their edges are smoothed for easier readability. This is especially apparent when the text size is large.
  • Embedded fonts can be partially or fully transparent.
  • Embedded fonts can be rotated.
  • Embedded fonts provide smoother playback when zooming.
  • Text appears exactly as you expect when using embedded fonts.
  • When you embed a font, you can use the FlashType hinting information that provides clear, high-quality text rendering in SWF files. Using FlashType hinting greatly improves the readability of text, particularly when it is rendered at smaller font sizes. For more information about FlashType hinting, see Using FlashType hinting.

Embedded fonts have the following limitations and / or drawbacks :

  • Embed only TrueType fonts. To embed other font types such as Type 1 PostScript fonts, embed that font in a SWF file that you create in Flash CS3, and then embed that SWF file in your Flex application.
  • Embedded fonts increase the file size of your application, because the document must contain font outlines for the text. This can result in longer download times for your users.
  • Embedded fonts, in general, decrease the legibility of the text at sizes smaller than 10 points. All embedded fonts use anti-aliasing to render the font information on the client screen. As a result, fonts may look fuzzy or illegible at small sizes. To avoid this fuzziness, you can use FlashType hinting to render fonts in Flex applications. For more information, see Using FlashType hinting.

You define the font that appears in each of your components by using the fontFamily style property. You can set this property in an external style sheet, a block, or inline. This property can take a list of fonts, as the following example shows:

.myClass {
    fontFamily: Arial, Helvetica;
    color: Red;
    fontSize: 22;
    fontWeight: bold;
}

Embedded font syntax :

To embed TrueType fonts, you use the following syntax in your style sheet or <mx:Style> tag:

@font-face {
    src:url("location") | local("name");
    fontFamily: alias;
    [fontStyle: italic | oblique | normal;]
    [fontWeight: bold | heavy | normal;]
    [flashType: true | false;]
}

The src property specifies how the compiler should look for the font, and the name of the font to look for. You can either load a font by its filename (by using src:url) or by its system font name (by using src:local). This property is required

The fontFamily property sets the alias for the font that you use to apply the font in style sheets. This property is required.

The fontStyle and fontWeight properties set the type face values for the font. These properties are optional. The default values are normal.

The flashType property determines whether to include the FlashType hinting information when embedding the font. This property is optional. The default value is true. You cannot use this option when embedding fonts from a SWF file .

The following example embeds the FooWebPro.ttf font file:

@font-face {
    src:url("../assets/FooWebPro.ttf");
    fontFamily: myFontFamily;
    flashType: true;
}

//This example embeds that same font, but by using its system font name:

@font-face {
    src:local("Foo Web Pro");
    fontFamily: myFontFamily;
    flashType: true;
}

After you embed a font with an @font-face declaration, you can use the new fontFamily name, or alias, in a type or class selector. The following example uses the myFontFamily embedded fontFamily as a type selector for VBox controls:

<?xml version="1.0"?>
<!-- fonts/EmbeddedFontFace.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
     @font-face {
        src:url("../assets/FooWebPro.ttf");
        fontFamily: myFontFamily;
        flashType: true;
     }

     VBox {
        fontFamily: myFontFamily;
     }
 </mx:Style>

  <mx:Panel title="Embedded Font Applied With Type Selector">
     <mx:VBox>
        <mx:B utton label="Click Me"/>
        <mx:Label text="Label"/>
      <mx:TextArea width="400" height="75" text="The text
            uses the myClass class selector." />
     </mx:VBox>
 </mx:Panel>
< /mx:Application>

//You can also apply the embedded font inline, as the following example shows:

< ? x ml version="1.0"?>
<!-- fonts/EmbeddedFontFaceInline.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     @font-face {
        src:url("../assets/FooWebPro.ttf");
        fontFamily: myFontFamily;
        flashType: true;
     }
 </mx:Style>

  <mx:Panel title="Embedded Font Applied Inline">
     fontFamily="myFontFamily">
       <mx:Button label="Click Me"/>
        <mx:Label text="Label"/>
        <mx:TextArea width="400" height="75" text="This text
            is in Myriad Web Pro." />
     </mx:VBox>
  </mx:Panel>
</mx:Application>

Directly referencing fonts  , that we will embed in Flex , from the computers filesystem has some drawbacks :

  • Only TrueType fonts can be embeded ( no Bitmap Fonts)
  • Selecting only specific charachters and / or number to embed is not posible

To ovecome the prementioned limitations a better practice would be to create  (with the Flash IDE) a SWF file that contains  pre-selected Fonts .

To create a  SWF file that embeds fonts:

  1. Create a document in Flash CS3.
  2. Select the Text Tool, and create a text area on the Stage by dragging the mouse.
  3. In the Properties panel, select the font you want to embed from the font drop-down list.
  4. Enter at least one character of text in the text area. If you are embedding more than one font, it is helpful to enter the name of the font and its typeface; for example:
  5. In the Properties panel, select Dynamic Text drop-down list to make this text dynamic.
  6. If you use FlashType hinting in your fonts, ensure that either the Anti-Alias for Readability or Custom Anti-Alias option is the selected anti-aliasing mode. If you select any other option, Flash does not include FlashType hinting information with your fonts’ SWF file. For more information about using FlashType hinting, see Using FlashType hinting.
  7. In the Properties panel, click the Embed button.The Character Embedding dialog box appears:
  8. Select one or more ranges to use. Select only the ranges that are necessary.You should select All only if it is absolutely necessary. The more glyphs that you add to the SWF file, the greater its size. For example, if you select All for Century Gothic, the final SWF file size is about 270 KB. If you select Uppercase, Lowercase, and Punctuation only, the final SWF file size is about 14 KB.Do not select Auto Fill unless you know exactly which characters you are going to use in your Flex application.
  9. Create additional text-based controls, one for each of the typefaces you want (such as bold, and italic). For the bold control, apply the bold typeface. For the italic control, apply the italic typeface. For the bold and italic control (if applicable), apply the bold and italic typefaces. For each typeface, select the range of glyphs to include in the SWF file.Your final Stage might appear like the following example:
  10. Select File > Export > Export Movie.Flash generates a SWF file that you import into your Flex application.

To embed fonts from a  SWF file into your Flex application:

  1. Embed each typeface with an @font-face declaration, as the following example shows:
  2. /* assets/FlashTypeStyles.css */
    
    @font-face {
    
    src:url("../assets/MyriadWebProEmbed.swf");
    
    fontFamily: "Myriad Web Pro";
    
    }
    
    @font-face {
    
    src:url("../assets/MyriadWebProEmbed.swf");
    
    fontFamily: "Myriad Web Pro";
    
    fontWeight: bold;
    
    }
    
    @font-face {
    
    src:url("../assets/MyriadWebProEmbed.swf");
    
    fontFamily: "Myriad Web Pro";
    
    fontStyle: italic;
    
    } 

    You specify the location of the SWF file by using the src attribute. You set the value of the fontFamily attribute to the name of the font as it appears in the list of available fonts in Flash. You must specify a new @font-face entry for each of the typeface properties if the font face is not plain.

    Do not specify a value for the flashType property in the @font-facedeclaration. This is because anti-aliasing settings in Flash determine whether to include the FlashType hinting information. After a SWF file that contains fonts has been generated, you cannot add the hinting information to the SWF file by using the Flex compiler or from within the Flex application.

  3. Define a style for each embedded font typeface. You can define this style as an external style sheet or in a <mx:Style> block, as the following example shows:
  4. /* assets/FlashTypeClassSelectors.css */
    .myPlainStyle {
        fontFamily: "Myriad Web Pro";
        fontSize: 24;
    }
    .myItalicStyle {
        fontFamily: "Myriad Web Pro";
        fontSize: 24;
        fontStyle: italic;
    }
    .myBoldStyle {
        fontFamily: "Myriad Web Pro";
        fontSize: 24;
        fontWeight: bold;
    }
    

    You must specify the fontFamily property in the style definition, and it must match the fontFamily property set in the @font-face declaration. Regardless of which typeface you are defining, the value of the fontFamily property to “Myriad Web Pro Bold”, but just “Myriad Web Pro.”
    You must also specify all typeface properties in the style definition, just as you did in the @font-face declaration.

  5. Apply the new style to your Flex controls, as the following example shows:
    <?xml version="1.0"?>
    <!-- fonts/EmbedFlashTypeFonts.mxml -->
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
      <mx:Style source="../assets/FlashTypeStyles.css"/>
      <mx:Style source="../assets/FlashTypeClassSelectors.css"/>
    
     <mx:Panel title="Embedded Font">
         <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:Panel>
    </mx:Application>
    

    You can also define and apply the styles inline, rather than define them in a style sheet and apply them with the styleName property. The following example sets the value of the fontFamily and fontStyle properties inline to apply the Myriad Web Pro font’s italic and bold typefaces to the Label controls:

    <?xml version="1.0"?>
    <!-- fonts/EmbedFlashTypeFontsInline.mxml -->
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
      <mx:Style source="../assets/FlashTypeStyles.css"/>
    
     <mx:Panel title="Embedded FlashType Font">
         <mx:VBox>
          <mx:Label text="Plain Label" fontFamily="Myriad Web Pro" fontSize="24"/>
           <mx:Label text="Italic Label" fontFamily="Myriad Web Pro" fontStyle="italic" fontSize="24"/>
          <mx:Label text="Bold Label" fontFamily="Myriad Web Pro" fontWeight="bold" fontSize="24"/>
         </mx:VBox>
      </mx:Panel>
    </mx:Application>
    

    The following example embeds the Myriad Web Pro font into the Flex application. It embeds each typeface, defines the styles for them, and applies those styles to Text controls.

    <?xm l version="1.0"?>
    <!-- fonts/EmbedFlashTypeFontsFull.mxml -->
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
      <mx:Style>
         @font-face {
            src:url("../assets/MyriadWebProEmbed.swf");
            fontFamily: "Myriad Web Pro";
         }
         @font-face {
            src:url("../assets/MyriadWebProEmbed.swf");
            fontFamily: "Myriad Web Pro";
            fontWeight: bold;
         }
         @font-face {
            src:url("../assets/MyriadWebProEmbed.swf");
            fontFamily: "Myriad Web Pro";
            fontStyle: italic;
         }
         .myPlainStyle {
            fontFamily: "Myriad Web Pro";
            fontSize: 24;
         }
         .myItalicStyle {
            fontFamily: "Myriad Web Pro";
            fontSize: 24;
            fontStyle: italic;
         }
         .myBoldStyle {
            fontFamily: "Myriad Web Pro";
            fontSize: 24;
            fontWeight: bold;
         }
      </mx:Style>
    
      <mx:Panel title="Embedded SWF-based Font">
         <mx:VBox>
            <!-- Apply each custom style to Text controls. -->
            myPlainStyle" text="Plain Text"/>
            myBoldStyle" text="Bold Text"/>
            myItalicStyle" text="Italic Text"/>
         </mx:VBox>
      </mx:Panel>
    
      <!-- Rotate the Text controls. If the text disappears when the control is
         rotated, then the font is not properly embedded. -->
      <mx:Button label="Rotate +1" click="++text1.rotation;++text2.rotation;
         ++text3.rotation;"/>
      <mx:Button label="Rotate -1" click="--text1.rotation;--text2.rotation;
         --text3.rotation;"/>
    </mx:Application>
    

    When you run the example, click the Button controls to rotate the text. This ensures that the fonts were properly embedded; if the fonts were not properly embedded, the text disappears when rotated.

    Instead of using the @font-face CSS syntax, you can use the [Embed] metadata keyword to embed fonts from SWF files in your Flex application. This can give you greater control over the font in ActionScript. To do it, you use the same SWF file that you created in previous examples. In your Flex application, you associate each font face with its own variable, as the following example shows:

    <?xml version="1.0"?>
    <!-- fonts/EmbedFlashTypeFontsActionScriptSimple.mxml -->
     <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
      <mx:Style>
         .myPlainStyle {
            fontFamily: "Myriad Web Pro";
            fontSize: 24;
         }
         .myItalicStyle {
            fontFamily: "Myriad Web Pro";
            fontSize: 24;
            fontStyle: italic;
         }
         .myBoldStyle {
            fontFamily: "Myriad Web Pro";
            fontSize: 24;
            fontWeight: bold;
         }
      </m x: S tyle>
    
      <!--[CDATA[-->
    
    [Embed(source='../assets/MyriadWebProEmbed.swf',
                fontName='Myriad Web Pro'
            )]
            private static var plainFont:Class;
    
    [Embed(source='../assets/MyriadWebProEmbedWithFontSymbols.swf',
                fontName='Myriad Web Pro',
                fontStyle='italic'
            )]
            private static var italicFont:Class;
    
    [Embed(source='../assets/MyriadWebProEmbedWithFontSymbols.swf',
                fontName='Myriad Web Pro',
                fontWeight='bold'
            )]
            private static var boldFont:Class;
    
      ]]></mx :S cript>
    
      <mx:Panel title="Embedded SWF-Based Font">
         <mx:VBox>
            <!-- Apply each custom style to Text controls. -->
    <mx:Text id="text1" styleName="myPlainStyle" text="Plain Text"/>
    <mx:Text id="text2" styleName="myBoldStyle" text="Bold Text"/>
    <mx:Text id="text3" styleName="myItalicStyle" text="Italic Text"/>
         </mx:VBox>
      </mx:Panel>
    
      <!-- Rotate the Text controls. If the text disappears when the control is
         rotated, then the font is not properly embedded. -->
      <mx:Button  label="Rotate +1"
        click="++text1.rotation;++text2.rotation;++text3.rotation;"  />
      <mx:Button  label="Rotate -1"
        click="--text1.rotation;--text2.rotation;--text3.rotation;"  />
    </mx:Application>
    

You must define a variable of type Class so that the compiler links the fonts into the final Flex application SWF file. This example sets the value of the static fontPlain, fontBold, and fontItalic variables, but they are not used in the rest of the application.

When you use the [Embed] statement to embed fonts in your Flex application, you must still define styles for those fonts so that those styles can be applied to Flex components, as you would if you embedded the fonts with the @font-face declarations.

You can also access fonts from SWF files as a Font Symbol.

To use fonts from SWF files that are Font Symbols:

  1. In Flash CS3, select Window > Library to show the contents of the library. It should be empty.
  2. Right-click the mouse when it is over the library, and select New Font to create a new font symbol.
  3. In the Font Symbol Properties dialog box, give the new font symbol a name and select the applicable font symbol properties (such as bold or italic). You use the symbol name you specify here in your [Embed] statement. Do this for each font typeface (such as plain, bold, italic, and bold italic).
  4. After you create a font symbol in the library, right click the symbol in the library and select Linkage.
  5. In the Linkage Properties dialog box, select Export for ActionScript, and click OK. The Identifier in this dialog box should match the symbol name you specified in the previous step. Do this for each font symbol in the library.
  6. n your Flex application’s [Embed] statement, point to the font symbol using the symbol attribute. Do not specify any other characteristics of the font such as the MIME type, fontStyle, fontWeight, or fontName in the [Embed] statement.

The following example embeds the Myriad Web Pro font that was exported from Flash CS3 with font symbols in the library:

<?xml version="1.0"?>
<!-- fonts/EmbedFlashTypeFontsActionScript.mxml -->
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     .myPlainStyle {
        fontFamily: "Myriad Web Pro";
        fontSize: 24;
     }
     .myItalicStyle {
        fontFamily: "Myriad Web Pro";
        fontSize: 24;
        fontStyle: italic;
     }
     .myBoldStyle {
        fontFamily: "Myriad Web Pro";
        fontSize: 24;
        fontWeight: bold;
     }
  </mx:Style>

  <!--[CDATA[-->

[Embed(source='../assets/MyriadWebProEmbedWithFontSymbols.swf',
            symbol='MyriadPlain'
        )]
        private var font1:Class;

[Embed(source='../assets/MyriadWebProEmbedWithFontSymbols.swf',
            symbol='MyriadBold'
        )]
        private var font2:Class;

[Embed(source='../assets/MyriadWebProEmbedWithFontSymbols.swf',
            symbol='MyriadItalic'
        )]
        private var font3:Class;

  ]]></mx:Script>

  <mx:Panel title="Embedded SWF-based Font">
     <mx:VBox>
        <!-- Apply each custom style to Text controls. -->
<mx:Text id="text1" styleName="myPlainStyle" text="Plain Text" />
<mx:Text id="text2" styleName="myBoldStyle" text="Bold Text" />
<mx:Text id="text3" styleName="myItalicStyle" text="Italic Text"/>
     </mx:VBox>
  </mx:Panel>

  <!-- Rotate the Text controls. If the text disappears when the control is
     rotated, then the font is not properly embedded. -->
 <mx:Button   label="Rotate +1"  click="++text1.rotation;++text2.rotation;++text3.rotation;" />
  <mx:Button  label="Rotate -1"  click="--text1.rotation;--text2.rotation;--text3.rotation;" />
</mx:Application>

This article from Adobe demostrates how to Create and referencing a font symbol with the Flash IDE

Advertisements

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s