font-variant-numericプロパティは、数字の表示スタイルを制御するために使用されます。このプロパティを使用することで、数字のフォーマットや表記方法を選択できます。特に、タイポグラフィにこだわるデザインでは、適切な数字の形式を選択することが重要です。
INDEX
- font-variant-numericの値とその効果の一覧
- 注意点と関連情報
- font-variant-numericプロパティが効かない時の原因と対策
- 共通するCSSコード
- font-variant-numeric: normal
- font-variant-numeric: lining-nums
- font-variant-numeric: oldstyle-nums
- font-variant-numeric: proportional-nums
- font-variant-numeric: tabular-nums
- font-variant-numeric: diagonal-fractions
- font-variant-numeric: stacked-fractions
- font-variant-numeric: slashed-zero
- まとめ
font-variant-numericの値とその効果の一覧
- normal: デフォルトの数字表記を使用します。
- lining-nums: ライニング数字（上下の高さが揃った数字）を使用します。
- oldstyle-nums: オールドスタイル数字（高さが不揃いの伝統的な数字）を使用します。
- proportional-nums: 比例幅の数字を使用します。
- tabular-nums: タブ状の数字（等幅）を使用します。
- diagonal-fractions: 斜めの分数表記を使用します。
- stacked-fractions: 積み上げ式の分数表記を使用します。
- slashed-zero: 斜線付きゼロを使用します。
注意点と関連情報
このプロパティを使用する際は、選択したフォントが対応する数字のスタイルをサポートしているか確認してください。フォントによっては、いくつかのスタイルがサポートされていない場合があります。
font-variant-numericプロパティが効かない時の原因と対策
フォントが数字スタイルをサポートしていない
font-variant-numericプロパティは、OpenTypeフォントの数字のスタイル（例: 通常数字、プロポーショナル数字、オールドスタイル数字など）を制御しますが、使用しているフォント自体がこれらの数字スタイルをサポートしていない場合、効果が発揮されません。
対策: 使用しているフォントが数字スタイル（例: lining-nums、oldstyle-nums、proportional-nums）をサポートしているか確認しましょう。サポートされていないフォントでは、別のフォントを選ぶか、代替フォントを指定します。
共通するCSSコード
.css-sample-container {
padding: 20px;
border: 1px solid #ccc;
margin-bottom: 20px;
width: 400px;
background-color: #f9f9f9;
text-align: center;
overflow-wrap: break-word;
}
.css-sample-text {
font-family: 'Times New Roman', serif;
font-size: 24px;
}font-variant-numeric: normal
デフォルトの数字表記の例です。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-text css-sample-font-variant-numeric-normal">12345</p>
</div>CSSコード
.css-sample-font-variant-numeric-normal {
font-variant-numeric: normal;
}表示結果
12345
font-variant-numeric: lining-nums
ライニング数字（上下の高さが揃った数字）の例です。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-text css-sample-font-variant-numeric-lining-nums">12345</p>
</div>CSSコード
.css-sample-font-variant-numeric-lining-nums {
font-variant-numeric: lining-nums;
}表示結果
12345
font-variant-numeric: oldstyle-nums
オールドスタイル数字（高さが不揃いの数字）の例です。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-text css-sample-font-variant-numeric-oldstyle-nums">12345</p>
</div>CSSコード
.css-sample-font-variant-numeric-oldstyle-nums {
font-variant-numeric: oldstyle-nums;
}表示結果
12345
font-variant-numeric: proportional-nums
比例幅の数字の例です。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-text css-sample-font-variant-numeric-proportional-nums">12345</p>
</div>CSSコード
.css-sample-font-variant-numeric-proportional-nums {
font-variant-numeric: proportional-nums;
}表示結果
12345
font-variant-numeric: tabular-nums
タブ状の等幅数字の例です。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-text css-sample-font-variant-numeric-tabular-nums">12345</p>
</div>CSSコード
.css-sample-font-variant-numeric-tabular-nums {
font-variant-numeric: tabular-nums;
}表示結果
12345
font-variant-numeric: diagonal-fractions
斜めの分数表記の例です。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-text css-sample-font-variant-numeric-diagonal-fractions">1/2 3/4</p>
</div>CSSコード
.css-sample-font-variant-numeric-diagonal-fractions {
font-variant-numeric: diagonal-fractions;
}表示結果
1/2 3/4
font-variant-numeric: stacked-fractions
積み上げ式の分数表記の例です。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-text css-sample-font-variant-numeric-stacked-fractions">1/2 3/4</p>
</div>CSSコード
.css-sample-font-variant-numeric-stacked-fractions {
font-variant-numeric: stacked-fractions;
}表示結果
1/2 3/4
font-variant-numeric: slashed-zero
斜線付きゼロの例です。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-text css-sample-font-variant-numeric-slashed-zero">0</p>
</div>CSSコード
.css-sample-font-variant-numeric-slashed-zero {
font-variant-numeric: slashed-zero;
}表示結果
0
まとめ
- font-variant-numericは、数字のスタイルを制御するプロパティです。
- 選択したフォントによっては、特定のスタイルがサポートされていない場合があります。
- ライニング数字、オールドスタイル数字、比例幅、等幅数字、分数表記、斜線付きゼロなど、さまざまな数字の表現が可能です。