fbpx

メニュー

TextlayoutFrameworkやFlash.text.engineで埋め込みOpenTypeフォントを使う方法

高橋文樹 高橋文樹

この投稿は 14年半 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。

最近気づいたにもかかわらず、日本語情報でこれだというのがないので、書いておきます。

わりと詳しいのはまつにおまかせさんのエントリーですが、その補足という感じです。

CFFフォントとは

Web上で日本語縦書きレイアウトを作る方法として有力なのがTextlayoutframeworkとFlash.text.engineなのですが、この2つは従来通りのやり方で埋め込みフォントを使うことができません。

というのは、TLFFTEはよりよい文字表現を実現するためなのかなんなのか、CFFというフォーマットを採用しているようです。これにより、アンチエイリアス処理なんかがきれいになるようなんですが、詳細はよくわかりません。

実際にFlex4 Gumboのリファレンスを見てみると、FTEFontLookupクラスはDEVICEとEMBEDDED_CFF定数しか持っていません。EMBEDDEDというのはないんですね。

FTEを拡張して作られているTLFもしかりです。

普通のTextfieldはembedFontをtrueにすれば埋め込みフォントを使えました。

単にプロパティが異なるだけなら問題ないのですが、困るのはCFFでのFontクラス作成がちょっと難しいということです。普通にFlash IDEとかで作っても認識してくれません。

よくやる方法としては、フォントを埋め込んだswfを作成して、それを外部から読み込み、内部で定義されているFontクラスを引っこ抜くというものだと思うのですが、これがCFFで埋め込まれていないとダメなんですね。

CFFでのフォント埋め込み方法

簡単に言うと、以下の流れです。FlexならMXML上で直接埋め込むこともできるのですが、Flash IDE(Flash Professionalのこと)で開発している人はそうもいかないと思うので、下記のやり方を覚えるのがいいと思います。

1.Flash Builder βかFlex SDK4 Gumboをダウンロード

Flash Builderは必須ではありません。要するに、Flex SDK 4以上を使いたいのです。

Flex SDK 3.*系だと、フォントをCFFでトランスコードするCFFFontManagerが入っていません。(多分)

Flex Builderを買う予定がないという方は我慢してSDKを使った方がいいと思います。以下、Flex SDKを前提に話を進めます。

2.フォントファイルのコピー

作業用フォルダ(この場合はHiraginoMincho)にOpenTypeフォントファイルをコピーします。Windowsなら「コントロールパネル>フォント」フォルダに入ってます。

3.クラスの作成

プロジェクトのメインファイル(HiraginoMincho.mxmlas)を作成し、下記のドキュメントクラスを定義します。

package {
   import flash.display.*;
   public class HiraginoMincho extends Sprite{
      [Embed(source="フォントファイルへのパス", fontName="HiraginoMincho", cff="true")]
      public static var font:Class;
      public function Mincho() {
      }
   }
}

4.コマンドラインでフォルダまで移動してコンパイル。

cd /path/to/working/directory/HiraginoMincho
mxmlc HiraginoMincho.mxml

5.別のswfで読み込んで使う

できあがったswfを読み込めば使うことができます。やり方は元エントリーに詳しいです。

フォント名が「クラス名_埋め込みClass変数」に変わるのでご注意。この例ではHiraginoMincho_fontになります。

注意点

Flex自体はデバイスフォントを埋め込むことができますが、CFFFontManagerはデバイスフォントを受け付けないようです。

したがって、フォントファイル自体をコピーしてEmbedタグのsource属性で指定することになります。

また、ヘルプを見るとこんなことが書いてあります。

To get the system font name in Windows, install the Font properties extension. Then right-click the font’s file in Windows Explorer and select the Names tab. Use the value under Font Family Name as the systemFont value.
Adobe Flex4 help – Using embedded fonts

「Windowsでデバイスフォント名を知りたい場合はフォントプロパティ拡張機能を使え」ということらしいのですが、これがすぐにわからなかったので、リンクを貼っておきます。

Microsoft Typography – Font properties extension, version 2.30

Microsoft Typographyなんてサイトがあったんですね。MSはまったくフォントに興味がないと思っていました。

というわけで、以上です。

追記

なんか環境を変えたら上手く行かなかったので、上手くいったソースを追記しておきます。

package{
   import flash.display.Sprite;
   public class main extends Sprite
   {
      [Embed(source="assets/ipamp.otf", fontName="IPAMincho", embedAsCFF="true")] //←ここが変わった
      public static var IPAMincho:Class;
      public function main()
      {
      }
   }
}

Embedの属性名が変わったのかな?

すべての投稿を見る

高橋文樹ニュースレター

高橋文樹が最近の活動報告、サイトでパブリックにできない情報などをお伝えするメーリングリストです。 滅多に送りませんので、ぜひご登録お願いいたします。 お得なダウンロードコンテンツなども計画中です。