font-variantプロパティは、フォントのスタイルを異なるバリエーションに変更するためのプロパティです。たとえば、小型の大文字（スモールキャップ）や、異なる数字の書式を指定することができます。
font-variantの値とその効果の一覧
- normal: デフォルトのフォントスタイルを使用します。
- small-caps: 小文字を大文字に変換し、小型にした大文字を使用します。
- all-small-caps: 全ての文字を小型の大文字に変換します。
- lining-nums: 数字をライン上に揃えたスタイルにします。
- ordinal: 番号に序数を適用します（例: 1st, 2nd）。
- slashed-zero: ゼロに斜線を引いたスタイルにします。
注意点と関連情報
font-variantは、テキストの表示を微調整する際に役立ちます。特に、見出しや強調したいテキストに使用されることが多く、小型の大文字や異なる数字フォーマットを適用することで、フォントのバリエーションを豊かにできます。
font-variantプロパティが効かない時の原因と対策
フォントがバリエーションスタイルをサポートしていない
font-variantプロパティは、小文字の大文字化（small-caps）や他の特定のスタイル（例: normal、all-small-caps）を指定するために使用されますが、フォント自体がこれらのバリエーションスタイルをサポートしていない場合、効果が現れません。
対策: 使用しているフォントが小文字の大文字化（small-caps）や他のバリエーションスタイルをサポートしているか確認しましょう。サポートされていないフォントでは、別のフォントを選ぶか、代替フォントを指定することで解決できます。
font-feature-settingsが優先されている
font-variantプロパティは、OpenTypeのフォント機能を制御しますが、font-feature-settingsプロパティが指定されている場合、これがfont-variantの効果を上書きしてしまうことがあります。
対策: font-feature-settingsがfont-variantと競合していないか確認し、必要に応じて調整します。特に、小文字の大文字化などのスタイルに関連する設定がfont-feature-settingsで明示的に指定されていないか確認します。
font-familyプロパティとの相性
font-variantは、font-familyで指定されたフォントに依存しますが、フォントがsmall-capsや他のバリエーションをサポートしていない場合、font-variantは機能しません。
対策: font-familyで指定されたフォントがfont-variantをサポートしているか確認し、サポートされていない場合は、適切なバリエーションをサポートするフォントを選ぶか、フォールバックのフォントを指定しましょう。
共通するCSSコード
.css-sample-container {
padding: 20px;
border: 1px solid #ccc;
margin-bottom: 20px;
width: 300px;
background-color: #f9f9f9;
text-align: center;
}
.css-sample-text {
font-family: 'Arial', sans-serif;
font-size: 20px;
}font-variant: normal
通常のフォントスタイルを使用する例です。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-text css-sample-font-variant-normal">Sample Text</p>
</div>CSSコード
.css-sample-font-variant-normal {
font-variant: normal;
}表示結果
Sample Text
font-variant: small-caps
小文字をスモールキャップ（小型の大文字）に変換する例です。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-text css-sample-font-variant-small-caps">Sample Text</p>
</div>CSSコード
.css-sample-font-variant-small-caps {
font-variant: small-caps;
}表示結果
Sample Text
font-variant: all-small-caps
全ての文字を小型の大文字に変換する例です。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-text css-sample-font-variant-all-small-caps">Sample Text</p>
</div>CSSコード
.css-sample-font-variant-all-small-caps {
font-variant: all-small-caps;
}表示結果
Sample Text
font-variant-numeric: lining-nums
数字をライン上に揃えるスタイルにする例です。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-text css-sample-font-variant-lining-nums">1234567890</p>
</div>CSSコード
.css-sample-font-variant-lining-nums {
font-variant-numeric: lining-nums;
}表示結果
1234567890
font-variant: ordinal
序数（例: 1st, 2nd）を適用する例です。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-text css-sample-font-variant-ordinal">1st, 2nd</p>
</div>CSSコード
.css-sample-font-variant-ordinal {
font-variant: ordinal;
}表示結果
1st, 2nd
font-variant-numeric: slashed-zero
ゼロに斜線を引いたスタイルにする例です。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-text css-sample-font-variant-slashed-zero">1230456789</p>
</div>CSSコード
.css-sample-font-variant-slashed-zero {
font-variant-numeric: slashed-zero;
}表示結果
1230456789
まとめ
- font-variantプロパティは、テキストの特定のバリエーション（スモールキャップや数字スタイルなど）を制御します。
- 主要な値として
normal、small-caps、lining-numsなどがあります。 - スタイルの調整をする際に、表示の微調整に役立つプロパティです。