Flash Text Engineでボールドとか斜体とか

試してみました。

FTEでフォントを指定する際は以前のFlashで使用してたFontクラスではなくFontDescriptionクラスを使用します。FontDescriptionのコンストラクタやプロパティで「fontPosture」「fontWeight」を指定することで、ボールドや斜体を指定できます。

ボールドや斜体が適用されるかどうかはフォントやプラットフォームによって挙動が異なりました。

  • Windows:MSゴシックやメイリオをはじめほとんどのフォントでボールドや斜体が有効でした。
  • Mac OSX:Osaka、ヒラギノなどほとんどの日本語フォントでボールドや斜体が無効です。メイリオは有効でした。Arialなど基本的な欧文フォントはボールドや斜体が有効でした。

Mac版はもしかするとFTEのバグかもしれません。欧文圏ではあまり問題ないと思いますが、FTEで日本語を扱う場合、Mac対応をどうするか?が問題になりそうです。


フォントのプレビューは以下のコードで確認しました。

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

<mx:Script>
  <![CDATA[
    import mx.events.ListEvent;
    import mx.controls.Alert;
    import flash.text.engine.FontWeight;
    import flash.text.engine.FontPosture;
    import flash.text.engine.TextBlock;
    import flash.text.engine.TextLine;
    import flash.text.engine.TextElement;
    import flash.text.engine.FontDescription;
    import flash.text.engine.ElementFormat;

function updateSampleFont(event:mx.events.ListEvent ):void {
  try {
   updateTextLine(normalFont, comboBox.selectedItem.fontName, FontPosture.NORMAL, FontWeight.NORMAL, "Normal font ノーマルフォントです。");
   updateTextLine(boldFont, comboBox.selectedItem.fontName, FontPosture.NORMAL, FontWeight.BOLD, "Bold font ボールドフォントです。");
   updateTextLine(italicFont, comboBox.selectedItem.fontName, FontPosture.ITALIC, FontWeight.NORMAL, "Italic font イタリックフォントです。");
   updateTextLine(boldItalicFont, comboBox.selectedItem.fontName, FontPosture.ITALIC, FontWeight.BOLD, "Bold Italic font ボールドイタリックフォントです。");
  } catch (e) {
    Alert.show("" + e);
  }
}

function updateTextLine(parent:UIComponent, fontName:String, posture:String, weight:String, text:String):void {
    try {
      parent.removeChildAt(0);
    } catch (e) {
    }
    var font:FontDescription = new FontDescription(fontName, weight, posture);
    var format:ElementFormat = new ElementFormat(font);
    format.fontSize = 50;
    var str:String = text;
    var textElement:TextElement = new TextElement(str, format);
    var textBlock:TextBlock = new TextBlock();
    textBlock.content = textElement;
    var textLine:TextLine = textBlock.createTextLine(null, 600);
    textLine.rotation = 0;
    parent.addChild(textLine);
    textLine.x = 0;        
    textLine.y = 50;
}
  ]]>
</mx:Script>

    <mx:ArrayCollection id="arrColl"
            source="{Font.enumerateFonts(true)}">
        <mx:sort>
            <mx:Sort>
                <mx:fields>
                    <mx:SortField name="fontName" />
                </mx:fields>
            </mx:Sort>
        </mx:sort>
    </mx:ArrayCollection>

    <mx:List id="comboBox"
            dataProvider="{arrColl}"
            labelField="fontName"
            fontSize="20"
            rowCount="5"
            change="updateSampleFont(event)" width="400">
        <mx:itemRenderer>
            <mx:Component>
                <mx:Label fontFamily="{data.fontName}"
                        toolTip="{data.fontName}" />
            </mx:Component>
        </mx:itemRenderer>
    </mx:List>
    <mx:VBox>
      <mx:UIComponent id="normalFont" height="100"></mx:UIComponent>
      <mx:UIComponent id="boldFont" height="100"></mx:UIComponent>
      <mx:UIComponent id="italicFont" height="100"></mx:UIComponent>
      <mx:UIComponent id="boldItalicFont" height="100"></mx:UIComponent>
    </mx:VBox>
</mx:Application>