CSSの@font-face.font-feature-settingsで高度な書体機能を制御する方法

"@font-face.font-feature-settings" は、CSS の "Miscellaneous" カテゴリに属するプロパティで、OpenType フォントに含まれる高度な書体機能を制御するために使用されます。このプロパティを使用することで、特定の文字の表示方法、文字間隔、行間隔などを調整することができます。

"@font-face.font-feature-settings" の構文

@font-face {
  font-family: 'MyFont';
  src: url('MyFont.woff2') format('woff2');
  font-feature-settings: 'ss01' on, 'liga' off;
}

上記のように、"@font-face" ルールの中に "font-feature-settings" プロパティを記述します。

"@font-face.font-feature-settings" の値

"font-feature-settings" プロパティの値は、以下の形式で記述します。

feature-tag [on|off|1|0]

on|off|1|0: 機能の有効・無効を設定します。

例：特定の合字を無効にする

@font-face {
  font-family: 'MyFont';
  src: url('MyFont.woff2') format('woff2');
  font-feature-settings: 'liga' off;
}

この例では、"MyFont" フォントで、合字機能が無効化されます。

"@font-face.font-feature-settings" の注意点

ブラウザによっては、すべての機能タグがサポートされていない場合があります。
機能の有効・無効は、フォントごとに設定することができます。
使用する機能タグは、OpenType フォントに実際に含まれている必要があります。

"@font-face.font-feature-settings" の応用例

特殊な文字の表示を制御する
文字間隔や行間隔を調整する
特定の文字の表示方法を調整する

"@font-face.font-feature-settings" プロパティを使用することで、OpenType フォントに含まれる高度な書体機能を制御することができます。この機能を活用することで、より高度なレイアウトやデザインを作成することができます。

例1：特定の合字を無効にする

@font-face {
  font-family: 'MyFont';
  src: url('MyFont.woff2') format('woff2');
  font-feature-settings: 'liga' off;
}

例2：スモールキャップを有効にする

この例では、"MyFont" フォントで、スモールキャップ機能が有効化されます。

@font-face {
  font-family: 'MyFont';
  src: url('MyFont.woff2') format('woff2');
  font-feature-settings: 'smcp' on;
}

例3：標準リガチャを有効化し、任意の合字を無効にする

この例では、"MyFont" フォントで、標準リガチャ機能が有効化され、"liga" と "cala" という合字機能が無効化されます。

@font-face {
  font-family: 'MyFont';
  src: url('MyFont.woff2') format('woff2');
  font-feature-settings: 'rlig' on, 'liga' off, 'cala' off;
}

例4：プロポーショナルメトリクスを有効にする

この例では、"MyFont" フォントで、プロポーショナルメトリクス機能が有効化されます。

@font-face {
  font-family: 'MyFont';
  src: url('MyFont.woff2') format('woff2');
  font-feature-settings: 'palt' on;
}

例5：カーニングを有効にする

この例では、"MyFont" フォントで、カーニング機能が有効化されます。

@font-face {
  font-family: 'MyFont';
  src: url('MyFont.woff2') format('woff2');
  font-feature-settings: 'kern' on;
}

ブラウザによっては、すべての機能タグがサポートされていない場合があります。使用前に、ブラウザの互換性を確認することをおすすめします。
上記の例では、woff2形式のフォントファイルを使用しています。他の形式のフォントファイルを使用する場合は、src プロパティの値を適切に変更してください。

そこで、"@font-face.font-feature-settings" の代替方法として、以下の方法が考えられます。

個別の CSS プロパティを使用する

OpenType フォントの主要な機能については、個別の CSS プロパティが用意されています。例えば、以下のようなものがあります。

font-feature-settings で制御できない機能については、フォントベンダーが提供する独自のプロパティを使用する必要がある場合があります。詳細は、フォントのドキュメントを参照してください。
font-variant-alternates: 代替文字を表示する
font-variant-caps: 大文字の処理方法を制御する
font-variant-ligatures: 合字機能を有効/無効にする

Webフォントサービスを利用する

一部の Webフォントサービスでは、"@font-face.font-feature-settings" で制御できる機能を、Webフォントファイルに組み込んで提供している場合があります。例えば、Google Fonts や Adobe Fonts などが該当します。

JavaScript を使用する

JavaScript を使用して、OpenType フォントの高度な機能を制御することもできます。ただし、難易度が高く、すべてのブラウザで動作するとは限りません。

画像を使用する

どうしても必要な機能がブラウザでサポートされていない場合は、該当する文字を含む画像を作成して使用する方法もあります。しかし、メンテナンス性や可読性に問題が生じる可能性があります。

複雑なレイアウトを作成する場合は、特に注意が必要です。
使用する環境によっては、パフォーマンスが低下する可能性があります。
代替方法によって、機能の完全な互換性が保たれない場合があります。