Firefox 4で対応したOpenTypeフォントのリガチャ、カーニング、異体字などを試してみた

Firefox 4で対応したOpenTypeフォントの機能を色々試してみました。

今回対応したOpenTypeフォントの機能の機能はCSSにて -moz-font-feature-settings というプロパティを設定する事で使用するしないのON/OFFを切り替えれる様です。

今回はCSSでこの様に定義し、

.liga0 {
	-moz-font-feature-settings: "liga=0"; 
}
.liga1 {
	-moz-font-feature-settings: "liga=1"; 
}

HTMLをこの様に記述し、「指定無し(デフォルト)の時」「無効にした時」「有効にした時」の3つの状態を比較するサンプルを作成しました。

【リガチャ】<br />
指定無し：<span>fi</span><br />
liga=0：<span class="liga0">fi</span><br />
liga=1：<span class="liga1">fi</span><br />

なお、OpenTypeの機能で有るため使用するフォントにOpenTypeフォントで有る。「ヒラギノ明朝 Pro」を指定しました。

* {
	font-family:"Hiragino Mincho Pro";
	font-size: 40px;
}

Windows向けの設定も同時にしておきたかったのですがWindowsで標準でインストールされているOpenTypeフォントについての情報が見当たらなかったので今回はMacのみ対応のデモとなります。

デモページはこちらになります。

実際にデモページが正しく描画されない環境の方の為にキャプチャ付きで解説をします。

解説

【リガチャ】

「指定無し」の時もリガチャに成っているのが確認出来ます。デフォルトでリガチャが有効な様です。

【カーニング】

上から順番に「指定無し」「無効にした時」「有効にした時」の並びです。

W と e の間隔や A と V の間隔に注目すると、「有効にした時」に加えて「指定無し」の場合にもカーニングが行われているのが確認出来ます。

【異体字】

こちらの仕様書の例として記載が有った、 jp78 と trad を試してみました。

CSS Fonts Module Level 3
http://dev.w3.org/csswg/css3-fonts/

「有効にした時」のみ異体字が表示されているのが確認出来ます。

おまけ

「Alternative fractions」という設定をON(afrc=1)にすると分数を教科書で見かける様なフォーマットで表示させる事が可能です。

なお、今回は -moz-font-feature-settings に指定する値は常に1つだけでしたが , で区切って以下の様に指定する事でOpenTyepの機能を複数使用する事も可能です。

	-moz-font-feature-settings: "liga=1, kern=1"; 

OpenTypeフォントの機能を使うプロパティはここで紹介した以外にも沢山有ります。他のプロパティの解説はこちらのPDFが図入りで解説して有り、とても分り易くてお勧めです。

関連情報

Firefox 4: OpenTypeフォントのサポート « Mozilla Developer Street (modest)
https://dev.mozilla.jp/hacksmozillaorg/firefox-4-font-feature-support/

次期Firefox 4ではOpenTypeフォントの機能をCSSから制御できる - フォントブログ
http://blog.petitboys.com/archives/opentype_firefox4.html

Firefox 4の新機能紹介 - OpenTypeフォントのリガチャ、カーニング、異体字対応 - 強火で進め
http://d.hatena.ne.jp/nakamura001/20110322/1300817974