CSS3でWebフォント機能が追加され、異なるデバイス上でも同じフォントの表示が可能になったことをご存じの方も多いと思います。CSS3のフォントに関する仕様ではその他にも様々な機能が追加されており、そのひとつが今回ご紹介するfont-feature-settingsプロパティです。
Webフォントで利用できるフォントフォーマットにはTTF(True Type Font)、OTF(Open Type Font)、EOT(Embedded OpenType)、SVG Font(Scalable Vector Graphics Font)、WOFF(Web Open Font Format）がありますが、その中でもOTFは組版に必要なタイポグラフィのオプション機能を持っています（OTFベースのWOFFであれば、同じようにオプション機能を保持しています）。たとえば、合字と呼ばれる複数の文字を結合した文字や、旧字体と呼ばれる字体がこれにあたります。font-feature-settingsプロパティを使うと、このオプション機能を利用することができます。
このプロパティはデバイスフォントだけではなく、Webフォントにも有効です。そこで今回は、Webフォント（大日本印刷オリジナルの書体である秀英体を使用しています）とFont feature settingsを使って、現段階で旧字体や合字の表示がどこまで可能か試してみました。
font-feature-settingsプロパティ
font-feature-settingsプロパティは、OpenTypeフォントの各機能の有効/無効を指定するプロパティです。機能を表すfeatureタグと、機能の有効/無効を示す値を組み合わせて使用します。たとえば、合字を表示する際には以下のような指定をします。先行実装の機能なので、ベンダープレフィックスを忘れずにつけておきます。（IE10ではベンダー プレフィックスを使うバージョンを非推奨にしているようです）
.liga {
-moz-font-feature-settings: “liga” 1;
}
同時に複数の機能を指定したい場合は、カンマで区切って指定します。
.dlig-vert {
-moz-font-feature-settings: “dlig” 1,”vert” 1;
}
利用できるfeatureタグ（上記では”liga”）は、こちらで確認することができます。OpenTypeフォントであればすべてのfeatureタグが使えるというわけではなく、フォントの実装によって搭載されているfeatureタグは異なります。それらの機能を、1で有効に、0で無効にすることができます。省略した場合は、1が指定されたと見なされるので、有効にする場合は値を省略しても良いでしょう。機能の有効/無効を示す値の種類は1,0の他に”on”,”off”が使えます。
Firefox 4.0からFirefox 14.0では、古いドラフトバージョンを実装していたため、FirefoxとIEでは有効になる値の構文が違う([参考]CSS コーナー: フォントの全要素を使用する)という情報もありますが、最新のFirefox 23(Win)では上記の構文が有効です。
フォントの機能については、CSS Fonts Module Level 3の第6章で定められています。font-variantの各サブプロパティにも同じ機能があります。たとえば、合字であればfont-variant-ligaturesというプロパティがこれにあたります。
表示例
では、実際の表示のされ方を見てみましょう。以降の表示結果画像の検証環境は、すべてFirefox 23.0.1(Win XP)です。左側が機能OFFの状態、右側が機能ONの状態です。
liga（欧文合字）
機能がONの場合、fとiがくっついて表示されていることが分かります。よく使われる機能のためか、Firefox 23では何も指定しなくても、デフォルトでONになっていました。
trad(旧字体)
jp04(JIS2004字形)
frac(分数)
分数の表示も可能です。HTML上では、1/100と記述するだけです。
nalt(修飾字形)
dlig(任意の合字)
vert(縦組み用文字)
ひと文字では分かりにくいですが、左側が横組み用の音引き、右側が縦組み用の音引きです。
vert、dligの組み合わせ
vert（縦組み用文字）とdlig(任意の合字)の機能を組み合わせて使ってみた例です。
これ以外にも、たくさんのfeatureタグがあります！今回、以下のfeatureタグについて検証してみましたので、一番困った表示結果と正しく表示された結果をご紹介します。
aalt （All Alternates：全ての異体字）
afrc （Alternative Fractions：分数の代替）
ccmp （Glyph Composition / Decomposition：字体組版／分解）
dlig （Discretionary Ligatures：任意の合字）
dnom （Denominators：分母）
expt （Expert Forms：エキスパート字形）
frac （Fractions：スラッシュを用いた分数）
fwid （Full Widths：全角）
hkna （Horizontal Kana Alternates：横組み用かな）
hojo （Hojo Kanji Forms：補助漢字）
hwid （Half-width：半角）
ital （Italics：欧文イタリック）
jp04 （JIS2004 Forms：JIS2004字形）
jp78 （JIS78 Forms：JIS78字形）
jp83 （JIS83 Forms：JIS83字形）
jp90 （JIS90 Forms：JIS90字形）
liga （Standard Ligatures：欧文合字）
nalt （Alternate Annotation Forms：修飾字形）
nlck （NLC Kanj Forms：印刷標準字体）
numr （Numerators：分子）
pkna （Proportional Kana：プロポーショナルかな）
pwid （Proportional Widths：プロポーショナル字形）
qwid （Quarter Widths：等幅四分字形）
ruby （Ruby Notation Forms：ルビ用字形）
sinf （Scientific Inferiors：下付き用数字）
subs （Subscript：下付き文字）
sups （Superscript：上付き用数字）
trad （Traditional Forms：旧字体）
twid （Third Widths：等幅三分字形）
vert （Vertical Writing：縦組み用字形）
vkna （Vertical Kana Alternates：縦組み用かな）
vrt2 （Vertical Alternates and Rotation：縦組み用回転字形）
zero （Slashed Zero：スラッシュ付きゼロ）
WindowsXP環境のChromeでは困ったことに、font-feature-settingsプロパティを指定するとWebフォントの指定が無視され、デバイスフォントにフォールバックされてしまいます。各OS,ブラウザでの検証結果については、次で紹介する表をご覧ください。
対応状況は？スマートフォンでは使える？
ブラウザの対応状況を知ることのできるサイト「Can I use…」でFont feature settingsの対応状況を確認すると、IE 10以降、Firefox 15以降、Chrome 21以降、Safari 7以降で対応していることが分かります（部分対応は除く）。モバイルブラウザでも、iOS 7、Chrome for Android 29ではサポートされるようです。
しかし、今回WinとMacそれぞれのFirefox,Chrome,Safariで検証を行ったところ、以下のような結果になりました。両OSで表示例のような結果が得られるのはFirefoxのみです。Mac版のほうが対応が進んでいることが分かります。一方モバイルブラウザは、iOS(ver.6.1.4)のMobileSafariでは未対応でしたが、Chrome for Android (ver.29.0.1547.72 / Galaxy Nexus, Nexus 7 ※どちらもAndroid 4.2.2)では対応していました。
| WinXP | Win7 | MacOSX(10.7.4) | MacOSX(10.7.5) | |
|---|---|---|---|---|
| Firefox23 | ○ | ○ | ○ | ○ |
| Chrome29 | ×Featuerタグを指定した箇所は、WEBフォントも無効に | ○ | ○ | ○ |
| Safari | ×（ver.5.1.7） | – | ×（ver.5.1.6） | △ligaだけ有効（ver.6.0.5） |
※フォントやfeatureタグによっては動作が異なる場合があります
