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 |
浏览器兼容性
加载中…