text-decoration-colorプロパティの使い方・サンプルコード
Sara
Code for Fun
font-variant-numericプロパティは、数字・分数・序数の表示形式を指定します。
* 表示形式はブラウザによって異なります。
セレクタ {
font-variant-numeric: ここに値を指定;
}
値 | |
---|---|
normal(初期値) | 別形式の使用を無効にする |
slashed-zero | 0にスラッシュを付ける |
lining-nums | 数字をベースラインに並べて表示する |
oldstyle-nums | 3, 7, 9 などの一部の数字を下げて表示する |
diagonal-fractions | 分母と分子のテキストサイズをが小さくして、スラッシュで区切って表示する |
stacked-fractions | 分母と分子を積み重ねて表示する |
proportional-nums | 全ての数字を同じ大きさにしない |
tabular-nums | 全ての数字を同じ大きさにする |
ordinal | 序数を表示する |
HTML
<p class="normal">1/4</p>
<p class="diagonal-fractions">1/4</p>
<p class="stacked-fractions">1/4</p>
CSS
.normal {
font-variant-numeric: normal;
}
.diagonal-fractions {
font-variant-numeric: diagonal-fractions;
}
.stacked-fractions {
font-variant-numeric: stacked-fractions;
}
SourceSansPro など序数の表示に対応しているフォントを .otf の形式で読み込み、font-family で指定してください。
HTML
<p class="ordinal">1st, 2nd, 3rd</p>
CSS
.ordinal {
font-family: 'SourceSansPro', sans-serif;
font-variant-numeric: ordinal;
}