font-variant
Baseline 廣泛可用 *
font-variant CSS 簡寫屬性允許你為字型設定所有字型變體。
你也可以使用 font 簡寫來設定 CSS Level 2.1 中定義的 font-variant 的 <font-variant-css2> 值（即 normal 或 small-caps）。
試一試
font-variant: normal;
font-variant: no-common-ligatures proportional-nums;
font-variant: common-ligatures tabular-nums;
font-variant: small-caps slashed-zero;
<section id="default-example">
<div id="example-element">
<p>Difficult waffles</p>
<table>
<tr>
<td><span class="tabular">0O</span></td>
</tr>
<tr>
<td><span class="tabular">3.14</span></td>
</tr>
<tr>
<td><span class="tabular">2.71</span></td>
</tr>
</table>
</div>
</section>
@font-face {
font-family: "Fira Sans";
src:
local("FiraSans-Regular"),
url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
section {
font-family: "Fira Sans", 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: small-caps;
font-variant: common-ligatures small-caps;
/* Global values */
font-variant: inherit;
font-variant: initial;
font-variant: revert;
font-variant: revert-layer;
font-variant: unset;
值
normal-
指定正常的字型外觀。每個長寫屬性的初始值都是
normal。 none-
將
font-variant-ligatures的值設定為none，並將其他長寫屬性的值設定為它們的初始值normal。 <common-lig-values>、<discretionary-lig-values>、<historical-lig-values>、<contextual-alt-values>-
指定與
font-variant-ligatures長寫屬性相關的關鍵字。可能的值有common-ligatures、no-common-ligatures、discretionary-ligatures、no-discretionary-ligatures、historical-ligatures、no-historical-ligatures、contextual和no-contextual。 stylistic()、historical-forms、styleset()、character-variant()、swash()、ornaments()、annotation()-
指定與
font-variant-ligatures長寫屬性相關的關鍵字和函式。 small-caps、all-small-caps、petite-caps、all-petite-caps、unicase、titling-caps-
指定與
font-variant-caps長寫屬性相關的關鍵字和函式。small-caps值是font簡寫屬性中唯一有效的非normal字型變體。 <numeric-figure-values>、<numeric-spacing-values>、<numeric-fraction-values>、ordinal、slashed-zero-
指定與
font-variant-numeric長寫屬性相關的關鍵字。可能的值有lining-nums、oldstyle-nums、proportional-nums、tabular-nums、diagonal-fractions、stacked-fractions、ordinal和slashed-zero。 <east-asian-variant-values>、<east-asian-width-values>、ruby-
指定與
font-variant-east-asian長寫屬性相關的關鍵字。可能的值有jis78、jis83、jis90、jis04、simplified、traditional、full-width、proportional-width和ruby。 sub、super-
指定與
font-variant-position長寫屬性相關的關鍵字和函式。 text、emoji、unicode-
指定與
font-variant-emoji長寫屬性相關的關鍵字和函式。
正式定義
| 初始值 | normal |
|---|---|
| 應用於 | 所有元素和文字。它也適用於 ::first-letter 和 ::first-line。 |
| 繼承性 | 是 |
| 計算值 | 同指定值 |
| 動畫型別 | 離散 |
正式語法
font-variant =
normal |
none |
[ [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ] || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || [ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ] || [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ] || [ <east-asian-variant-values> || <east-asian-width-values> || ruby ] || [ sub | super ] || [ text | emoji | unicode ] ]
<common-lig-values> =
common-ligatures |
no-common-ligatures
<discretionary-lig-values> =
discretionary-ligatures |
no-discretionary-ligatures
<historical-lig-values> =
historical-ligatures |
no-historical-ligatures
<contextual-alt-values> =
contextual |
no-contextual
<feature-value-name> =
<ident>
<numeric-figure-values> =
lining-nums |
oldstyle-nums
<numeric-spacing-values> =
proportional-nums |
tabular-nums
<numeric-fraction-values> =
diagonal-fractions |
stacked-fractions
<east-asian-variant-values> =
jis78 |
jis83 |
jis90 |
jis04 |
simplified |
traditional
<east-asian-width-values> =
full-width |
proportional-width
示例
設定小型大寫字母字型變體
HTML
<p class="normal">Firefox rocks!</p>
<p class="small">Firefox rocks!</p>
CSS
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
結果
規範
| 規範 |
|---|
| CSS 字型模組第 4 級 # font-variant-prop |
| Scalable Vector Graphics (SVG) 2 # FontVariantProperty |
瀏覽器相容性
載入中…