OpenType 機能の使用

OpenType 機能は、フォント内の隠し部屋にたとえられます。隠し部屋の扉を開ければ、フォントの外観や振る舞いを少し、あるいは劇的に変えるための方法がわかります。すべての OpenType 機能が常に利用に適しているわけではありませんが、一部の機能は優れたタイポグラフィを実現するために不可欠です。

フォントの OpenType 機能をプロジェクトで使用するには、OpenType 機能を web プロジェクトに組み込んだ後、必要な CSS を使用してテキストのスタイルを指定する必要があります。各機能の使用例と、コピーして CSS に貼り付けることができるコードについては、構文ガイドを参照してください。

フォントの OpenType 機能を web プロジェクトに組み込むには、web プロジェクトページを表示し、プロジェクトの「編集」リンクをクリックします。「文字セット」セクションで、「OpenType 機能」ボックスをオンにします。

このボックスをオンにすると、その web フォントファミリーで使用できる機能のリスト（合字、代替文字、スモールキャップスなど）が表示されます。 

リストには、ファミリーのすべての太さとスタイルで利用可能な OpenType 機能が表示されます。特定の太さやスタイルにしかない機能は、リストに表示されません。

使用する機能をブラウザーがサポートしているかの確認

font-variant と font-feature-settings をブラウザーがサポートしていなければ、重要な OpenType 機能がどのような状況でも正常に動作しないことになります。

サポート状況に関しては微妙な表現が使用されます。新しいバージョンのブラウザーがサポートすると言う場合に注意点が伴ったり、OpenType 機能をサポートしていない古いブラウザーはクラッシュする可能性があります。Chrome のデフォルトでは、デフォルトで有効になっているべき機能（一般的な合字、前後関係に依存する字形など）が有効になっていません。masOS および iOS の Safari では、指定した font-feature-settings の値がすべて無視され、代わりにいくつかの機能がデフォルトで有効になります。この Safari のデフォルトの選択肢は変更できません。Firefox の一部のバージョン（バージョン 15 およびそれ以前のバージョン）では、複数のデザインのセットを有効にした場合に問題が発生します。Chrome 32 およびそれ以前で OpenType 機能を適用すると、web フォントの動作が停止します。

現在のブラウザーサポートは、ベンダー接頭辞に大きく依存しています。ヘルプドキュメントの CSS での OpenType 機能の構文には、このサンプルのようにベンダー接頭辞プロパティを多く使用したコードが記載されています。

CSS を使用して OpenType 機能をテキストのスタイルに設定

OpenType 機能を有効にするための CSS 構文は現在も発展中です。知っておくべきことは、高レベルプロパティと低レベルプロパティの 2 つがあること、および継承が特に難しいことです。

低レベル CSS プロパティの font-feature-settings は、ベンダー接頭辞によってブラウザーで多少サポートされていますが、2 つの理由で利用が面倒です。まず、覚えにくい 4 文字の OpenType 機能タグを使用しています。次に、すべての機能タグが 1 つのプロパティ内で指定されるので、プロパティが煩雑になります。特定の OpenType 機能の構文と複数の OpenType 機能を使用するための構文を参照してください。

高レベル CSS プロパティの font-variant とそのサブプロパティは、“small-caps” や “diagonal-fractions” のような自然言語による値を使用する点で優れています。W3C は、可能であれば常に高レベル CSS プロパティを使用することを求めていますが、ブラウザーではサポートされていません。それでも、この構文に慣れておくことをお勧めします。

そのため、ここでは font-variant と font-feature-settings の両方を、どのような目的でデザインされているかを念頭に置きながら利用します。記載する CSS ではまず、このコードのように読みやすい font-variant を指定します。

継承

font-feature-setting は、使用頻度の低い特定のフォント機能にアクセスする唯一の手段となる低レベルプロパティであるので、ソースの順序にかかわらず font-variant をオーバーライドします。ただし、font-feature-settings はそれ自身もオーバーライドすることに注意してください。

継承された font-feature-settings の値は、このプロパティが再度適用されるときにオーバーライドされます。この例では、class クラスの要素に対して、スモールキャップス（smcp）とオールドスタイル数字（onum）の両方を有効にするには、“onum” 値をもう一度含める必要があります。そのため、以下のようにこの宣言を書き直すことができます。

インデックス付きの font-feature-settings 値

一部の font-feature-settings の値はさらに複雑です。これまでの例では、各値に文字列（またはカンマで区切られた文字列のセット）が使用されてきました。「onum」や「smcp」などの機能タグの有無は、どちらか一方を選択するのと同様です。つまり、この有無により機能はオンかオフになります。

これ自体は合理的ですが、例えばフォントに大文字 ‘A’ のスワッシュ字形バージョンが 2 種類ある場合はどうなるでしょうか？この場合は、スワッシュ字形を有効にするだけではなく、スワッシュ字形を有効にしてさらに特定のスワッシュ字形を選択する必要があります。そのため、値の文字列の後に、数値インデックスを追加します。

ここでどの数値を指定すべきかわからないかもしれません。フォントには何種類のスワッシュ字形があるのでしょうか？それは、フォントによって異なります。0 を使用すると、スワッシュ字形機能がオフになります。数値インデックスを使用する他の機能（デザインのバリエーション、デザインのセットなど）でも同じことが言えます。

複数の OpenType 機能の使用

font-variant プロパティは、すべての font-variant サブプロパティに対応する CSS 短縮形です。一般的な合字およびオールドスタイル数字を有効にするには、次のように指定できます。

同様に、font-feature-settings を使用して、カンマ区切りの値のリストを指定することで、複数の機能を有効にできます。

どちらの場合でも、継承された値は全体的にオーバーライドされます。また、ブラウザーのサポート状況は異なります。font-variant の値には、複数の機能を一度に有効にするようにデザインされているものもあります（大文字のスモールキャップスを参照）。

リソース

CSS でのスタイル設定の準備が整ったら、よく使用される OpenType 機能の構文集をブックマークしてください。