概要

font-feature-settingsは、CSSでOpenTypeフォントの高度なタイポグラフィ機能を制御するプロパティです。このプロパティを使用することで、リガチャ（合字）、数字スタイル、スワッシュ、小文字の大文字化など、通常のフォント設定ではカバーしきれない細かな調整を行うことが可能です。デザイン性を高めるためにフォントの表現をカスタマイズする際に、特に役立ちます。

font-feature-settingsの基本構文

.element {
  font-feature-settings: "liga" 1, "smcp" 1;
}
  • "liga" 1
    リガチャを有効にします。
  • "smcp" 1
    小文字の大文字化（スモールキャップ）を有効にします。 各機能は、4文字のタグとそれに続く値（1で有効、0で無効）で指定します。

OpenType機能とは？

OpenTypeフォントには、デザイナーや開発者がカスタムで使える特定の高度な機能が含まれています。これにより、標準のフォント機能を超えた細かなタイポグラフィ設定が可能です。以下のような機能が典型的な例です。

  • リガチャ（合字）の有効化や無効化
  • スワッシュやオルタネート（代替）字形の適用
  • 異なる数字スタイルの使用（比例数字、タブラー数字など）
  • 小文字を大文字として扱うスモールキャップ これらの機能を細かく調整することで、より洗練されたデザインや読みやすさを実現できます。

font-feature-settingsの主な機能

1. リガチャ（“liga”, “dlig”）

  • “liga”: 標準的なリガチャを有効にします（“fi”、“fl”など）。
  • “dlig”: 任意のリガチャ（デザイナーによって追加された特別な合字）を有効にします。
.element {
  font-feature-settings: "liga" 1, "dlig" 1;
}

2. スモールキャップ（“smcp”）

スモールキャップは、テキスト内の小文字を小さな大文字に変換する機能です。

.element {
  font-feature-settings: "smcp" 1;
}

この設定を使うと、フォント内の小文字が自動的に小さな大文字に置き換えられます。デザインやブロック引用など、特定のスタイルに応じて使えます。

3. オルタネート字形（“salt”）

“salt”は、デフォルトの文字とは異なる代替字形を使用します。多くの装飾フォントに含まれているスタイリッシュなオプションです。

.element {
  font-feature-settings: "salt" 1;
}

これにより、通常の字形とは異なるフォントの装飾的なバリエーションが適用されます。

4. 数字スタイル（“onum”, “tnum”）

  • “onum”: オールドスタイルの数字（上下にバランスの取れた数字）を適用します。
  • “tnum”: タブラー数字（固定幅で整列する数字）を有効にします。
.element {
  font-feature-settings: "onum" 1, "tnum" 1;
}

onumはデザイン性の高い数字表現に、tnumは数値データや表形式で使用する際に適したオプションです。

5. ヒストリカル・リガチャ（“hlig”）

歴史的なリガチャを表示したい場合、“hlig”を使って古い書体に見られるリガチャを有効にできます。

.element {
  font-feature-settings: "hlig" 1;
}

歴史的な雰囲気や、古典的なデザインが求められる場合に適しています。

使用例

実際にfont-feature-settingsを使ったコード例を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .standard-ligatures {
      font-feature-settings: "liga" 1; /* 標準リガチャを有効 */
    }
    .no-ligatures {
      font-feature-settings: "liga" 0; /* リガチャを無効 */
    }
    .small-caps {
      font-feature-settings: "smcp" 1; /* スモールキャップを有効 */
    }
    .alt-numbers {
      font-feature-settings: "onum" 1, "tnum" 1; /* オールドスタイルとタブラー数字を有効 */
    }
  </style>
  <title>font-feature-settingsの例</title>
</head>
<body>
  <p class="standard-ligatures">fl fi</p>
  <p class="no-ligatures">fl fi</p>
  <p class="small-caps">small caps text</p>
  <p class="alt-numbers">1234567890</p>
</body>
</html>
  • standard-ligaturesクラスでは、標準的なリガチャが適用されます。
  • no-ligaturesクラスでは、リガチャを無効化し、通常の文字が表示されます。
  • small-capsクラスでは、小文字がスモールキャップに変換されます。
  • alt-numbersクラスでは、オールドスタイルとタブラー数字が適用されます。

font-feature-settingsの実用的なポイント

  • 高度なタイポグラフィ制御: font-feature-settingsを使うと、OpenTypeフォントの詳細な機能をカスタマイズでき、標準のCSSプロパティでは実現できない特殊なフォント表現が可能です。
  • デザイン性向上: リガチャやオルタネート字形、スモールキャップなど、タイポグラフィの細かな調整が可能になり、洗練されたデザインを作り上げるのに役立ちます。
  • フォント互換性に注意: これらの設定は、OpenType機能をサポートしているフォントでのみ機能します。すべてのフォントがこれらの機能を持っているわけではないため、フォント選定時にはサポートされている機能を確認することが重要です。

注意点

フォント依存: font-feature-settingsプロパティで制御できる機能は、使用しているフォントによって異なります。すべてのフォントがこのプロパティに対応しているわけではないため、特定の機能を使用する際はフォントのサポート状況を確認してください。

  • ブラウザ対応: font-feature-settingsはほとんどのモダンブラウザでサポートされていますが、ブラウザの互換性を常に確認し、古いブラウザ向けにフォールバックを用意することが推奨されます。

まとめ

font-feature-settingsプロパティは、OpenTypeフォントの高度な機能を制御するために使用されるCSSの強力なツールです。リガチャやスモールキャップ、オルタネート字形など、タイポグラフィにおける繊細な調整を行うことで、フォントデザインのクオリティを大幅に向上させることができます。特定のフォント機能を利用することで、読みやすさやデザイン性を高め、よりプロフェッショナルなウェブサイト作りをサポートします。

参照:

``CSS`` font-feature-settings property | MDN