クライアントマシンに依存せずに、指定したフォントを利用できるよう、Flex アプリケーション内に TrueType フォント（TTF）ファミリまたは OpenType フォント（OTF）ファミリを埋め込むことができます。これにより、このアプリケーションを実行するときは Flash Player で必ずこのフォントを使用できるため、フォントがない場合の影響を考慮せずに済みます。

埋め込みフォントには次の利点があります。

• クライアントの環境に目的のフォントをインストールしておく必要がありません。
• 埋め込みフォントはアンチエイリアス処理されます。つまりフォントの縁が滑らかになり、読みやすくなります。特にテキストのサイズが大きな場合に効果的です。
• 埋め込みフォントの一部またはすべてを、ユーザーから見えなくすることができます。
• 埋め込みフォントを回転することができます。
• 埋め込みフォントは、拡大したときに滑らかに表示されます。
• 埋め込みフォントを使用した場合、テキストは意図したとおりに正確に表示されます。
• フォントを埋め込むときは、クリアで品質の高いテキストレンダリングを SWF ファイルで実現する高度なアンチエイリアス情報を使用できます。高度なアンチエイリアスを使用すると、特に小さいフォントサイズでレンダリングするときに、テキストの読みやすさが大きく向上します。高度なアンチエイリアスの詳細については、高度なアンチエイリアスの使用を参照してください。

しかし、埋め込みフォントは必ずしも最良のソリューションであるとは限りません。埋め込みフォントには、次のような制限と欠点があります。

• TrueType フォントまたは OpenType フォントだけが埋め込まれます。Type 1 PostScript フォントなどの他のフォントタイプを埋め込むには、Flash 8 で作成する SWF ファイルにそのフォントを埋め込み、その SWF ファイルを Flex アプリケーションに埋め込みます。詳細については、SWF ファイルからのフォントの埋め込みを参照してください。
• ドキュメントにテキストのフォントアウトラインを含める必要があるので、埋め込みフォントを使用するとアプリケーションのファイルサイズが大きくなります。その結果、ユーザーがファイルをダウンロードするのにかかる時間が長くなります。
• 通常、埋め込みフォントを使用すると、テキストサイズが 10 ポイント未満のテキストの読みやすさが低下します。すべての埋め込みフォントは、アンチエイリアス処理を使用してフォント情報をクライアントの画面にレンダリングします。したがって、サイズが小さいとぼやけて表示されたり、読みにくくなったりします。これを避けるには、Flex アプリケーションで高度なアンチエイリアスを使用してフォントをレンダリングします。詳細については、高度なアンチエイリアスの使用を参照してください。
• 場合によっては、埋め込みフォントをビジュアルコンポーネントで使用すると切り詰められることがあります。この場合は、スタイルプロパティを使用するかサブクラス化してコンポーネントのパディングプロパティを変更することが必要な場合があります。これは一部のフォントでのみ発生します。

Flex アプリケーションでは通常、埋め込みフォントにカスケーディングスタイルシート（CSS）シンタックスを使用します。@font-face "at-rule" 宣言を使用して埋め込みフォントのソースを指定し、fontFamily プロパティを使用してフォントの名前を定義します。使用する同じフォントファミリの書体ごとに @font-face 宣言を指定する必要があります。ソースには、ローカル JRE（Java Runtime Environment）フォントまたはファイルパスを使用してアクセスできるフォントを指定できます。このフォントファミリ名を MXML コード内で使用して、埋め込みフォントを参照します。

Flex コンパイラが探し出せないフォントを埋め込もうとすると、Flex ではエラーがスローされます。アプリケーションはコンパイルされません。

埋め込みフォントのシンタックス

TrueType フォントまたは OpenType フォントを埋め込むには、スタイルシートまたは <mx:Style> タグ内で次のシンタックスを使用します。

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

src プロパティで、コンパイラがフォントを見つける方法、および見つけるフォントの名前を指定します。src:url を使用してファイル名でフォントをロードするか、src:local を使用してシステムフォント名でロードすることができます。このプロパティは必須です。詳細については、埋め込みフォントの検索を参照してください。src プロパティは、コンパイラが使用するフォントマネージャの判別にも役に立ちます。詳細については、フォントマネージャについてを参照してください。

fontFamily プロパティで、スタイルシートでフォントを適用するために使用するフォントのエイリアスを設定します。このプロパティは必須です。システムフォントのファミリ名と一致するファミリ名でフォントを埋め込むと、Flex コンパイラで警告が発生します。この警告を無効にする場合は、show-shadows-system-font-warnings コンパイラオプションを false に設定します。

fontStyle および fontWeight プロパティで、フォントの書体の値を設定します。これらのプロパティは省略可能です。デフォルト値は normal です。

advancedAntiAliasing プロパティで、フォントの埋め込み時に高度なアンチエイリアス情報を含めるかどうかを指定します。このプロパティはオプションです。デフォルト値は true です。SWF ファイルからフォントを埋め込むときは、このオプションは使用できません。SWF ファイルからのフォントの埋め込みを参照してください。高度なアンチエイリアスの使用の詳細については、高度なアンチエイリアスの使用を参照してください。

次の例では、フォントファイル MyriadWebPro.ttf を埋め込みます。

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

次の例でも同じフォントを埋め込みますが、システムフォント名を使用します。

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

@font-face 宣言でフォントを埋め込んだ後は、fontFamily プロパティの値やエイリアスを、タイプセレクタやクラスセレクタ内で使用できます。次の例は、VBox タイプセレクタのフォントとして、fontFamily プロパティの値の myFontFamily を使用します。

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

  <mx:Panel title="Embedded Font Applied With Type Selector">
     <mx:VBox>
        <mx:Button 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>
前の例で実行する SWF ファイルは以下のとおりです。

また、次の例で示すように、コントロールの fontFamily プロパティの値としてエイリアスを指定することで、埋め込みフォントをインラインで適用することもできます。

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

  <mx:Panel title="Embedded Font Applied Inline">
     <mx:VBox 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>
前の例で実行する SWF ファイルは以下のとおりです。

この例を実行すると、Button コントロールのラベルでシステムフォントが使用されますこれは、Button コントロールのラベルのデフォルトのスタイルにボールド書体を使用しているからです。埋め込みフォントの書体（Myriad Web Pro）には、ボールド書体の定義が含まれていません。Button コントロールのラベルで適切な書体を使用するには、フォントのボールド書体を埋め込んで Button コントロールのラベルが正しいフォントでレンダリングされるようにするか、Button コントロールの書体を非ボールドに変更する必要があります。ボールド書体の埋め込みについては、複数の書体の使用を参照してください。

埋め込みフォントの検索

@font-face 宣言の src プロパティでは、フォントファミリの場所を指定します。url 関数または local 関数を指定できます。これらの関数について次の表で説明します。

@font-face 宣言では、src プロパティの url 関数または local 関数を指定する必要があります。他のプロパティはすべて省略可能です。一般的に local ではなく、url を使用します。ファイルを指定した方が、オペレーティングシステムで制御される参照を使用するよりも確実だからです。

同じ fontFamily プロパティの埋め込みフォントと非埋め込みフォントが、混在しないようにしてください。

ActionScript へのフォントの埋め込み

ActionScript で [Embed] メタデータタグを使用することで、位置または名前を指定して、TrueType フォントファイル、OTF フォントファイルまたはシステムフォントを埋め込むことができます。場所を指定してフォントを埋め込むには、[Embed] メタデータタグで source プロパティを使用します。名前を指定してフォントを埋め込むには、[Embed] メタデータタグで systemFont プロパティを使用します。

次の例では、[Embed] タグのシンタックスを使用し、場所を指定してフォントを埋め込みます。

<?xml version="1.0"?>
<!-- fonts/EmbeddedFontFaceActionScriptByLocation.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     .mystyle1 {
        fontFamily:myMyriadFont;
        fontSize: 32pt;
     }
     .mystyle2 {
        fontFamily:myBoldMyriadFont;
        fontSize: 32pt;
        fontWeight: bold;
     }
  </mx:Style>
  
  <mx:Script>
     /* 
      * Embed a font by location. 
      */
     [Embed(source='../assets/MyriadWebPro.ttf', 
        fontName='myMyriadFont', 
        mimeType='application/x-font'
     )] 
     // You do not use this variable directly. It exists so that 
     // the compiler will link in the font.
     private var font1:Class;
     
     /* 
      * Embed a font with bold typeface by location. 
      */
     [Embed(source='../assets/MyriadWebPro-Bold.ttf', 
        fontWeight='bold', 
        fontName='myBoldMyriadFont', 
        mimeType='application/x-font', 
        advancedAntiAliasing='true'
     )] 
     private var font2:Class;
     
  </mx:Script>

  <mx:Panel title="Embedded Fonts Using ActionScript">
     <mx:VBox>
        <mx:Label 
            width="100%" 
            height="75" 
            styleName="mystyle1" 
            text="The text uses the MyriadWebPro font." 
            rotation="15"
        />
        <mx:Label 
            width="100%" 
            height="75" 
            styleName="mystyle2" 
            text="The text uses the MyriadWebPro-Bold font." 
            rotation="15"
        />
     </mx:VBox>
  </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

[Embed] タグで設定した fontName プロパティの値を、スタイル定義でエイリアス（fontFamily）として使用します。

ボールドやイタリックなど、異なる書体を持つフォントを埋め込むには、[Embed] ステートメントとスタイル定義で、fontWeight プロパティまたは fontStyle プロパティを指定します。異なる書体の埋め込みの詳細については、複数の書体の使用を参照してください。

この例が正しく機能することを確認するために、Label コントロールを回転させます。フォントが正しく埋め込まれていない場合は、Label コントロールに表示されているテキストを回転させると、そのテキストが消失します。

ローカルフォント、すなわちシステムフォントを埋め込むには、フォントのファイル名ではなくシステムフォント名を使用します。また、[Embed] タグで source プロパティではなく、systemFont プロパティを使用してその名前を指定します。それ以外の場合は、次の例と同じシンタックスを使用します。

<?xml version="1.0"?>
<!-- fonts/EmbeddedFontFaceActionScriptByName.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     .mystyle1 {
        fontFamily:myPlainFont;
        fontSize: 32pt;
     }
     .mystyle2 {
        fontFamily:myItalicFont;
        fontSize: 32pt;
        fontStyle: italic;
     }
  </mx:Style>
  
  <mx:Script>
     /* 
      * Embed a font by name. 
      */
     [Embed(systemFont='Myriad Web Pro', 
        fontName='myPlainFont', 
        mimeType='application/x-font'
     )] 
     // You do not use this variable directly. It exists so that 
     // the compiler will link in the font.
     private var font1:Class;
     
     /* 
      * Embed a font with italic typeface by name. 
      */
     [Embed(systemFont='Myriad Web Pro', 
        fontStyle='italic', 
        fontName='myItalicFont', 
        mimeType='application/x-font', 
        advancedAntiAliasing='true'
     )] 
     private var font2:Class;
     
  </mx:Script>

  <mx:Panel title="Embedded Fonts Using ActionScript">
     <mx:VBox>
        <mx:Label 
            width="100%" 
            height="75" 
            styleName="mystyle1" 
            text="The text uses the plain typeface." 
            rotation="15"
        />
        <mx:Label 
            width="100%" 
            height="75" 
            styleName="mystyle2" 
            text="The text uses the italic typeface." 
            rotation="15"
        />
     </mx:VBox>
  </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

Windows でシステムフォント名を取得するには、フォントプロパティの拡張機能をインストールします。そして、Windows エクスプローラでフォントのファイルを右クリックし、「Names」タブを選択します。「Font Family Name」の下の値を systemFont の値として使用します。

[Embed] メタデータタグまたは @font-face 宣言で unicodeRange パラメータを指定することで、フォントの文字範囲のサブセットを指定できます。デフォルトのすべての文字ではなく、ある範囲の文字だけを埋め込むことで、埋め込みフォントのサイズが小さくなり、SWF ファイルの最終的な出力サイズが小さくなります。詳細については、文字範囲の設定を参照してください。

高度なアンチエイリアスの使用

フォントを埋め込むときに高度なアンチエイリアスを使用して、埋め込むフォントにフォントに関する追加情報を含めることができます。通常、高度なアンチエイリアス情報を使用する埋め込みフォントは、フォントサイズが小さいときによりクリアでシャープに表示されます。

デフォルトでは、Flex アプリケーションで埋め込むフォントには高度なアンチエイリアス情報が使用されます。このデフォルトは、flex-config.xml ファイルのコンパイラオプション fonts.advanced-anti-aliasing で設定されます。デフォルト値は true です。スタイルシートで値を設定するか、設定ファイルで値を変更すると、このデフォルト値をオーバーライドできます。スタイルシートで高度なアンチエイリアスを無効にするには、次の例に示すように、@font-face 規則で advancedAntiAliasing スタイルプロパティを false に設定します。

@font-face {
    src:url("../assets/MyriadWebPro.ttf");
    fontFamily: myFontFamily;
    advancedAntiAliasing: false;
}

高度なアンチエイリアスを使用すると、コンパイラのパフォーマンスが落ちることがあります。これは実行時には問題ありませんが、アプリケーションを頻繁にコンパイルする場合や Web 層コンパイラを使用する場合には顕著になることがあります。高度なアンチエイリアスを使用すると、SWF ファイルのロードが若干遅くなることもあります。特に、使用する文字セットの数が多くなると、このロード速度の低下が目立つようになります。したがって、使用するフォントの数に注意する必要があります。高度なアンチエイリアス情報があることで、Flash Player および Adobe® AIR™ でのメモリ使用量が増える場合もあります。例えば、4 ～ 5 種類のフォントを使用している場合、メモリ使用量がおよそ 4 MB 増加します。

Flex アプリケーションで高度なアンチエイリアスを使用するフォントを埋め込むと、フォントは他の埋め込みフォントとまったく同じように機能します。これらのフォントは、アンチエイリアス処理され、回転が可能で、部分または全体を透明にすることができます。

高度なアンチエイリアスを使用するフォント定義では、追加のスタイルプロパティの fontAntiAliasType、fontGridFitType、fontSharpness および fontThickness がサポートされます。これらのプロパティはすべて継承スタイルです。

高度なアンチエイリアス関連のスタイルプロパティは CSS スタイルなので、fontFamily や fontSize などの標準のスタイルプロパティと同様に使用できます。例えば、テキストベースのコンポーネントでは New Century 14 の高度なサブピクセルアンチエイリアスをシャープネス 50、太さ -35 で使用し、すべての Button コントロールでは Tahoma 10 の高度なピクセルアンチエイリアスをシャープネス 0、太さ 0 で使用することが可能です。これらのスタイルは、TextFiled コントロールのすべてのテキストに適用されます。一部の文字にのみ適用することはできません。

高度なアンチエイリアスのスタイルプロパティのデフォルト値は、defaults.css ファイルで定義されています。このファイルを別のファイルに置き換えた場合や、そのプロパティをオーバーライドする別のスタイルシートを使用した場合、Flash Player および AIR での高度なアンチエイリアスを使用するフォントのレンダリングには標準のフォントレンダラーが使用されます。高度なアンチエイリアスを使用するフォントを埋め込んでも、fontAntiAliasType プロパティを advanced に設定していないと、高度なアンチエイリアス情報の利点を生かすことはできません。

これらのプロパティについて次の表で説明します。

埋め込みフォントの検出

SystemManager クラスの isFontFaceEmbedded() メソッドを使用すると、フォントが埋め込まれているかどうか、さらに埋め込まれているフォントがあれば、それが Font クラスの register() メソッドを使用してグローバルに登録されているかどうかを判断できます。isFontFaceEmbedded() メソッドは 1 つの引数を受け取ります。この引数は、フォントの TextFormat を記述するオブジェクトです。このメソッドは、次の例に示すように指定したフォントファミリが埋め込まれているかどうかを示すブール値を返します。

<?xml version="1.0"?>
<!-- fonts/DetectingEmbeddedFonts.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
     creationComplete="determineIfFontFaceIsEmbedded()">
  <mx:Style>
     @font-face {
        src: url(../assets/MyriadWebPro.ttf);
        fontFamily: myPlainFont;
        advancedAntiAliasing: true;
     }
     
     .myStyle1 {
        fontFamily: myPlainFont; 
        fontSize:12pt
     }
  </mx:Style>
  <mx:Script><![CDATA[
     import mx.managers.SystemManager;
     import flash.text.TextFormat;
     
     public function determineIfFontFaceIsEmbedded():void {
        var tf1:TextFormat = new TextFormat();
        tf1.font = "myPlainFont";
        
        var tf2:TextFormat = new TextFormat();
        tf2.font = "Arial";
        
        var b1:Boolean = Application.application.systemManager.
           isFontFaceEmbedded(tf1);
        var b2:Boolean = Application.application.systemManager.
           isFontFaceEmbedded(tf2);
        l1.text = tf1.font + " (" + b1 + ")";
        l2.text = tf2.font + " (" + b2 + ")";
     }
  ]]></mx:Script>
  <mx:Text id="text1" styleName="myStyle1" text="Rotate Me"/>

  <mx:Button label="Rotate +1" click="++text1.rotation;"/>
  <mx:Button label="Rotate -1" click="--text1.rotation;"/>

  <mx:Form>
     <mx:FormItem label="isFontFaceEmbedded:">
        <mx:Label id="l1"/>
     </mx:FormItem>         
     <mx:FormItem label="isFontFaceEmbedded:">
        <mx:Label id="l2"/>
     </mx:FormItem>         
  </mx:Form>    
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

Font クラスの enumerateFonts() メソッドを使用して、デバイスや埋め込みフォントに関する情報を出力できます。次の例では埋め込みフォントの一覧を表示します。

<?xml version="1.0"?>
<!-- fonts/EnumerateFonts.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="listFonts()">
  <mx:Style>
     @font-face {
        src:url("../assets/MyriadWebPro.ttf");
        fontFamily: myFont;
        advancedAntiAliasing: true;
     }

     @font-face {
        src:url("../assets/MyriadWebPro-Bold.ttf");
        fontFamily: myFont;
        fontWeight: bold;
        advancedAntiAliasing: true;
     }

     @font-face {
        src:url("../assets/MyriadWebPro-Italic.ttf");
        fontFamily: myFont;
        fontStyle: italic;
        advancedAntiAliasing: true;
     }
     
     .myPlainStyle {
        fontSize: 32;
        fontFamily: myFont;
     }
     
     .myBoldStyle {
        fontSize: 32;
        fontFamily: myFont;
        fontWeight: bold;
     }

     .myItalicStyle {
        fontSize: 32;
        fontFamily: myFont;
        fontStyle: italic;
     }
  </mx:Style>

  <mx:Script><![CDATA[
     private function listFonts():void {
        var fontArray:Array = Font.enumerateFonts(false);
        for(var i:int = 0; i < fontArray.length; i++) {
           var thisFont:Font = fontArray[i];
           if (thisFont.fontType == "embedded") {
            trace("name: " + thisFont.fontName + 
            "; typeface: " + thisFont.fontStyle + 
            "; type: " + thisFont.fontType);
           }
        }
     }
  ]]></mx:Script>

  <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:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例による出力を次に示します。

name: myFont; typeface: regular; type: embedded
name: myFont; typeface: bold; type: embedded
name: myFont; typeface: italic; type: embedded

enumerateFonts() メソッドは 1 つのブール値の引数を受け取ります。この引数は、enumerateDeviceFonts です。enumerateDeviceFonts プロパティのデフォルト値は false で、これはデフォルトでは埋め込みフォントの配列が返されることを示します。

enumerateDeviceFonts 引数を true に設定すると、enumerateFonts() メソッドはクライアントシステムで使用できるデバイスフォントの配列を返しますが、それはクライアントの mms.cfg ファイルで、DisableDeviceFontEnumeration プロパティをデフォルト値の 0 に設定している場合だけです。DisableDeviceFontEnumeration プロパティを 1 に設定すると、クライアントで明示的に設定しない限り、Flash Player ではクライアントコンピュータ上にあるデバイスフォントのリストは作成されません。mms.cfg ファイルによるクライアントの設定の詳細については、Flash Player のマニュアルを参照してください。