CSS プロパティ font-variant

CSS プロパティ font-variant：小型大文字と異体字形の制御

CSS プロパティ font-variant：小型大文字と異体字形の制御

font-variant CSS プロパティは、テキストを小型大文字で表示するか、通常の文字で表示するかを制御できます。また、オプションの合字やコンテキスト形式を有効または無効にするためにも使用できます。

font-variant プロパティ値

  • font-variant: normal;
    • デフォルト値。ブラウザは、標準の字形でテキストを表示します。
  • font-variant: small-caps;
    • ブラウザは、可能な場合、小型大文字でテキストを表示します。
  • font-variant: all-small-caps;
    • すべての小型大文字。small-caps とは異なり、フォントのデフォルトスタイルが大文字の場合でも、all-small-caps はすべての文字を小型大文字で強制的に表示します。
  • font-variant: common-ligatures;
    • 一般的な合字形式を有効にします。
  • font-variant: no-common-ligatures;
    • 一般的な合字形式を無効にします。
  • font-variant: discretionary-ligatures;
    • 通常は読みやすさを向上させるために使用される追加の合字形式を有効にします。
  • font-variant: no-discretionary-ligatures;
    • 追加の合字形式を無効にします。
  • font-variant: historical-ligatures;
    • 古いテキストや歴史的なテキストに見られる合字形式を有効にします。
  • font-variant: no-historical-ligatures;
    • 古いテキストや歴史的なテキストに見られる合字形式を無効にします。
  • font-variant: contextual;
    • 周囲の文字に合わせて調整されるコンテキスト形式を有効にします。
  • font-variant: no-contextual;
    • コンテキスト形式を無効にします。

小型大文字


<p>これは<span style="font-variant: small-caps;">小型大文字</span>の例です。</p>
<p>これは<span style="font-variant: all-small-caps;">すべての小型大文字</span>の例です。</p>

小型大文字は、標準の大文字よりも背が低く、通常、同じフォントの標準の小文字よりもウェイトが重くなっています。これらは、小文字と一緒に使用して、すべて大文字にするほど強い視覚効果を与えずに、テキストに視覚的な区別を作成することを目的としています。

合字


<p>一般的な合字:<span style="font-variant: common-ligatures;"> fi fl ffi ffl </span></p>
<p>任意の合字:<span style="font-variant: discretionary-ligatures;"> ct st </span></p>
<p>歴史的な合字:<span style="font-variant: historical-ligatures;"> ſh ch tz </span></p>

合字は、2 つ以上の文字を 1 つの字形に組み合わせたものです。

コンテキスト形式


<p>コンテキスト形式:<span style="font-variant: contextual;"> Bata </span></p>

コンテキスト形式は、周囲の文字に合わせて調整されます。たとえば、"lavatory" の "a" は "bat" の "a" とは異なる場合があります。

ブラウザの互換性

font-variant プロパティとその個々の値のブラウザの互換性を示す表を以下に示します。

プロパティ値 Chrome Firefox Safari Edge Opera
normal はい はい はい はい はい
small-caps はい はい はい はい はい
all-small-caps はい はい はい はい はい
common-ligatures はい はい はい はい はい
no-common-ligatures はい はい はい はい はい
discretionary-ligatures 一部 はい 一部 一部 一部
no-discretionary-ligatures 一部 はい 一部 一部 一部
historical-ligatures 一部 はい 一部 一部 一部
no-historical-ligatures 一部 はい 一部 一部 一部
contextual 一部 はい 一部 一部 一部
no-contextual 一部 はい 一部 一部 一部

出典:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-variant
https://www.w3school.com.cn/cssref/pr_font_font-variant.asp

注意

  • すべてのフォントが、小型大文字、合字、またはコンテキスト形式をサポートしているわけではありません。選択したフォントがこれらの機能をサポートしていない場合、font-variant プロパティは機能しません。

その他の関連情報

  • font-variant プロパティの値は、font-variant: small-caps common-ligatures; のように組み合わせて使用​​できます。
  • font-variant プロパティは省略形であり、font-variant-caps、font-variant-ligatures、font-variant-numeric、font-variant-east-asian、および font-variant-position プロパティを設定するために使用できます。

よくある質問

Q1: font-variant プロパティはすべてのブラウザでサポートされていますか？

A1: いいえ、すべての値がすべてのブラウザで完全にサポートされているわけではありません。特に、合字やコンテキスト形式のサポートは、ブラウザやフォントによって異なる場合があります。ブラウザの互換性については、上記の表を参照してください。

Q2: font-variant を使用して数字のスタイルを変更できますか？

A2: はい、font-variant-numeric プロパティを使用して数字のスタイルを変更できます。ただし、font-variant プロパティの省略形では設定できません。詳細については、MDN のドキュメントを参照してください。

Q3: font-variant プロパティは、テキストの読みやすさを向上させるためにどのように役立ちますか？

A3: font-variant プロパティを使用すると、合字やコンテキスト形式などのタイポグラフィ機能を制御できます。これらの機能は、テキストの視覚的な魅力と読みやすさを向上させるのに役立ちます。たとえば、合字は特定の文字の組み合わせをより視覚的に心地よいものにすることができ、コンテキスト形式は文字の周りの文字に基づいて文字の形状を調整して、より自然で読みやすいフローを作成できます。