試一試
font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: tabular-nums;
font-variant-numeric: oldstyle-nums;
font-variant-numeric: lining-nums;
font-variant-numeric: proportional-nums;
font-variant-numeric: diagonal-fractions;
<section id="default-example">
<div id="example-element">
<table>
<tr>
<td><span class="tabular">0</span></td>
</tr>
<tr>
<td><span class="tabular">3.54</span></td>
</tr>
<tr>
<td><span class="tabular">1.71</span></td>
</tr>
<tr>
<td><span class="tabular">1st</span></td>
</tr>
<tr>
<td><span class="tabular">3/4</span></td>
</tr>
</table>
</div>
</section>
@font-face {
font-family: "Source Sans Pro";
src:
local("SourceSansPro-Regular"),
url("/shared-assets/fonts/SourceSansPro-Regular.otf") format("opentype");
font-weight: normal;
font-style: normal;
}
section {
font-family: "Source Sans Pro", sans-serif;
margin-top: 10px;
font-size: 1.5em;
}
#example-element table {
margin-left: auto;
margin-right: auto;
}
.tabular {
border: 1px solid;
}
語法
css
font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: lining-nums; /* <numeric-figure-values> */
font-variant-numeric: oldstyle-nums; /* <numeric-figure-values> */
font-variant-numeric: proportional-nums; /* <numeric-spacing-values> */
font-variant-numeric: tabular-nums; /* <numeric-spacing-values> */
font-variant-numeric: diagonal-fractions; /* <numeric-fraction-values> */
font-variant-numeric: stacked-fractions; /* <numeric-fraction-values> */
font-variant-numeric: oldstyle-nums stacked-fractions;
/* Global values */
font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: revert;
font-variant-numeric: revert-layer;
font-variant-numeric: unset;
此屬性可以採用以下兩種形式之一：
- 關鍵字值
normal - 或以下列出的一個或多個其他值，用空格分隔，順序不限。
值
normal-
此關鍵字導致停用此類替代字形的使用。
ordinal-
此關鍵字強制使用序數標記的特殊字形，例如英語中的 1st、2nd、3rd、4th 或義大利語中的 1a。它對應於 OpenType 值
ordn。 slashed-zero-
此關鍵字強制使用帶斜槓的 0；當需要清晰區分 O 和 0 時，這很有用。它對應於 OpenType 值
zero。 <numeric-figure-values>-
這些值控制用於數字的字型樣式。有兩種可能的值：
lining-nums啟用數字全部位於基線上的字型樣式。它對應於 OpenType 值lnum。oldstyle-nums啟用某些數字（如 3、4、7、9）帶有下行筆畫的字型樣式。它對應於 OpenType 值onum。
<numeric-spacing-values>-
這些值控制用於數字的字型樣式的大小。有兩種可能的值：
proportional-nums啟用數字大小不全相同的字型樣式。它對應於 OpenType 值pnum。tabular-nums啟用數字大小全部相同的字型樣式，從而使它們可以像表格中一樣輕鬆對齊。它對應於 OpenType 值tnum。
<numeric-fraction-values>-
這些值控制用於顯示分數的字形。有兩種可能的值：
diagonal-fractions啟用分子和分母變小並用斜槓分隔的字型樣式。它對應於 OpenType 值frac。stacked-fractions啟用分子和分母變小、堆疊並用水平線分隔的字型樣式。它對應於 OpenType 值afrc。
正式定義
| 初始值 | normal |
|---|---|
| 應用於 | 所有元素和文字。它也適用於 ::first-letter 和 ::first-line。 |
| 繼承性 | 是 |
| 計算值 | 同指定值 |
| 動畫型別 | 離散 |
正式語法
font-variant-numeric =
normal |
[ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]
<numeric-figure-values> =
lining-nums |
oldstyle-nums
<numeric-spacing-values> =
proportional-nums |
tabular-nums
<numeric-fraction-values> =
diagonal-fractions |
stacked-fractions
示例
設定序數數字形式
點選下面程式碼塊中的“Play”按鈕，在 MDN Playground 中編輯示例。
html
<p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p>
css
@font-face {
font-family: "Source Sans Pro";
src: url("https://mdn.github.io/shared-assets/fonts/SourceSansPro-Regular.otf")
format("opentype");
font-weight: normal;
font-style: normal;
}
.ordinal {
font-family: "Source Sans Pro", sans-serif;
font-size: 2rem;
font-variant-numeric: ordinal;
}
規範
| 規範 |
|---|
| CSS 字型模組第 4 級 # font-variant-numeric-prop |
瀏覽器相容性
載入中…