CSS「font-variant」で多彩なフォント表現を実現！詳細解説とサンプルコード

「font-variant」の役割と基本的な使い方

• font-variant-numeric：数字の表示形式を制御します。
• font-variant-ligatures：合字の表示を制御します。
• font-variant-caps：大文字の表示形式を制御します。

基本的な書き方は以下の通りです。

selector {
  font-variant: normal | small-caps | lining-nums | ordinal-nums | stylistic-nums | fractions | slashed-zero;
}

例：

h1 {
  font-variant: small-caps; /* 大文字を小文字サイズの英字に変換 */
}

p {
  font-variant: lining-nums; /* 数字を縦棒揃えに */
}

それぞれの個別プロパティについて、詳細と使用例を以下に示します。

1 font-variant-caps

• all-caps
  小文字も大文字に変換します。
• small-caps
  大文字を小文字サイズの英字に変換します。
• normal
  デフォルト値。大文字は通常の形式で表示されます。

例：

h1 {
  font-variant-caps: small-caps; /* 見出しをスモールキャップに変換 */
}

.uppercase {
  font-variant-caps: all-caps; /* 全ての文字を大文字に変換 */
}

2 font-variant-ligatures

• all-ligatures
  全ての合字を許可します。
• no-contextual-ligatures
  文脈依存型の合字を無効にします。
• no-historical-ligatures
  歴史的な合字を無効にします。
• no-common-ligatures
  一般的な合字を無効にします。
• normal
  デフォルト値。合字が許可されます。

例：

p {
  font-variant-ligatures: no-common-ligatures; /* 一般的な合字を無効化 */
}

.ligatures-all {
  font-variant-ligatures: all-ligatures; /* 全ての合字を許可 */
}

3 font-variant-numeric

• slashed-zero
  0をスラッシュで打ち消します。
• fractions
  分数をスラッシュで区切って表示します。
• stylistic-nums
  様式化された数字を表示します。
• ordinal-nums
  序数詞（1st、2ndなど）を接尾辞として追加します。
• lining-nums
  数字を縦棒揃えにします。
• normal
  デフォルト値。数字は通常の形式で表示されます。

例：

.price {
  font-variant-numeric: lining-nums; /* 価格表記を縦棒揃えに */
}

.ordinal {
  font-variant-numeric: ordinal-nums; /* 順位を序数詞で表示 */
}

• 複雑な設定を避けて、必要な機能のみを指定することを推奨します。
• 一部の古いブラウザでは、すべての値がサポートされない場合があります。
• 利用可能な値は、使用するフォントによって異なります。

「font-variant」は、CSSデザインの可能性を飛躍的に広げる強力なプロパティです。適切な使い方をマスターすることで、より個性豊かで魅力的な表現を実現することができます。

• [CSS Tricks - Using

---

スモールキャップ

h1 {
  font-variant: small-caps;
}

一般的な合字を無効化

p {
  font-variant-ligatures: no-common-ligatures;
}

このコードは、段落内のすべてのテキストにおいて、一般的に使用される合字を無効化します。

数字を縦棒揃え

.price {
  font-variant-numeric: lining-nums;
}

このコードは、.price クラスを持つ要素内のすべての数字を縦棒揃えにします。

序数詞の自動付与

.order {
  font-variant-numeric: ordinal-nums;
}

このコードは、.order クラスを持つ要素内のすべての数字を、序数詞（1st、2ndなど）に変換します。

分数をスラッシュで区切る

.fraction {
  font-variant-numeric: fractions;
}

このコードは、.fraction クラスを持つ要素内の分数すべてを、スラッシュで区切って表示します。

0 をスラッシュで打ち消す

.zero {
  font-variant-numeric: slashed-zero;
}

このコードは、.zero クラスを持つ要素内のすべての 0 を、スラッシュで打ち消します。

h2 {
  font-variant: small-caps lining-nums;
}

このコードは、<h2> 要素内のすべてのテキストをスモールキャップに変換し、かつ数字を縦棒揃えにします。

• 数学記号を専用のフォントで表示する
• ローマ数字を使用する
• 電話番号をハイフンで区切る
• 特定の単語のみ合字を無効化する
• 見出しをすべてスモールキャップにする

「font-variant」を駆使することで、細部までこだわった洗練されたデザインを実現することができます。

---

代替プロパティの活用

「font-variant」の一部機能は、他のCSSプロパティで代替できます。以下に、代表的な例とその詳細を示します。

スモールキャップ

• font-size と text-transform の組み合わせ：

  p {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: normal;
  }
  

合字

• font-feature-settings プロパティ：

  p {
    font-feature-settings: "liga=0"; /* 全ての合字を無効化 */
  }
  

数字の形式

• font-family とカスタムフォントの利用：

  @font-face {
    font-family: 'MyCustomFont';
    src: url('MyCustomFont.woff') format('woff');
  }
  
  p {
    font-family: 'MyCustomFont', sans-serif;
  }
  

これらの代替手段は、ブラウザサポートやフォントの機能によって制限がある場合があります。詳細については、各プロパティのドキュメントを参照することをお勧めします。

画像の活用

フォントに依存した表現を画像として用意することで、「font-variant」に頼らずにデザインを実現できます。この方法は、特に複雑な装飾や特殊なフォントスタイルが必要な場合に有効です。

例

• 手書きの文字やイラストを画像化する
• アイコンフォントを画像としてSVG形式で取り込む
• ロゴや見出しを画像として使用

画像を使用する場合は、ファイルサイズやアクセシビリティを考慮する必要があります。また、代替テキストを設定することも重要です。

背景画像を使用して、疑似的なフォント効果を作成することもできます。この方法は、比較的シンプルな表現に適しています。

例

• セルの背景にグラデーションを設定して、段差を表現する
• 段落の背景にストライプパターンを設定して、罫線を表現する

背景画像を使用する場合は、繰り返し設定や位置調整を適切に行う必要があります。また、コンテンツとのコントラストも考慮する必要があります。

上記以外にも、以下のような方法で「font-variant」の機能を代替することができます。

• Webフォントサービスの利用
• SVGフォントの活用
• CSSスニペットやライブラリの利用

これらの方法は、それぞれ異なる利点と欠点があります。状況に応じて最適な方法を選択することが重要です。

「font-variant」は強力なツールですが、代替手段を理解しておくことで、より柔軟で創造的なデザインが可能になります。それぞれの方法の特性を理解し、状況に応じて適切な方法を選択しましょう。