试一试
font-feature-settings: normal;
font-feature-settings: "liga" 0;
font-feature-settings: "tnum";
font-feature-settings: "smcp", "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
/* Use the default settings */
font-feature-settings: normal;
/* Set values for OpenType feature tags */
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;
font-feature-settings:
"smcp",
"swsh" 2;
/* Global values */
font-feature-settings: inherit;
font-feature-settings: initial;
font-feature-settings: revert;
font-feature-settings: revert-layer;
font-feature-settings: unset;
在可能的情况下，Web 作者应该改用 font-variant 简写属性或其相关的长写属性，例如 font-variant-ligatures、font-variant-caps、font-variant-east-asian、font-variant-alternates、font-variant-numeric 或 font-variant-position。
这些属性比 font-feature-settings 能够带来更有效、可预测、易于理解的结果。font-feature-settings 是一个低级特性，旨在处理在没有其他方法来启用或访问 OpenType 字体特性时的特殊情况。特别是，不应使用 font-feature-settings 来启用小型大写字母。
值
此属性指定为关键字 normal 或逗号分隔的 <feature-tag-value> 值列表。渲染文本时，OpenType <feature-tag-value> 值列表将传递给文本布局引擎以启用或禁用字体特性。
normal-
指示文本使用默认字体设置进行布局。这是默认值。
<feature-tag-value>-
表示由一个标签名称和一个可选值组成的用空格分隔的元组。
标签名称始终是四个 ASCII 字符的
<string>。如果标签名称字符过多或过少，或者包含U+20–U+7E码点范围之外的字符，则描述符无效。可选值可以是正整数或关键字
on或off。关键字on和off分别是值1和0的同义词。如果未设置值，则默认值为1。对于非布尔型 OpenType 特性（例如样式替换），该值表示要选择的特定字形；对于布尔型特性，该值开启或关闭该特性。
正式定义
| 初始值 | normal |
|---|---|
| 应用于 | 所有元素和文本。它也适用于 ::first-letter 和 ::first-line。 |
| 继承性 | 是 |
| 计算值 | 同指定值 |
| 动画类型 | 离散 |
正式语法
font-feature-settings =
normal |
<feature-tag-value>#
示例
启用各种字体特性
css
/* use small-cap alternate glyphs */
.small-caps {
font-feature-settings: "smcp" on;
}
/* convert both upper and lowercase to small caps (affects punctuation also) */
.all-small-caps {
font-feature-settings: "c2sc", "smcp";
}
/* use zeros with a slash through them to differentiate from "O" */
.nice-zero {
font-feature-settings: "zero";
}
/* enable historical forms */
.historical {
font-feature-settings: "hist";
}
/* disable common ligatures, usually on by default */
.no-ligatures {
font-feature-settings: "liga" 0;
}
/* enable tabular (monospaced) figures */
td.tabular {
font-feature-settings: "tnum";
}
/* enable automatic fractions */
.fractions {
font-feature-settings: "frac";
}
/* use the second available swash character */
.swash {
font-feature-settings: "swsh" 2;
}
/* enable stylistic set 7 */
.fancy-style {
font-family: "Gabriola", cursive;
font-feature-settings: "ss07";
}
规范
| 规范 |
|---|
| CSS 字体模块第 4 级 # font-feature-settings-prop |
浏览器兼容性
加载中…