font-feature-settings

用于控制高级排版特性的工具类。

快速参考

类	属性
font-features-[<value>]	font-feature-settings: <value>;
font-features-(<custom-property>)	font-feature-settings: var(<custom-property>);

示例

基础示例

使用 font-features-[<value>] 工具类，在支持该特性的字体中启用 OpenType 特性：

<!-- [!code classes:font-features-["smcp"]] -->
<p class="font-features-['smcp'] ...">This text uses small caps.</p>

启用多项特性

可以用逗号分隔来同时启用多项 OpenType 特性：

<!-- [!code classes:font-features-["smcp","onum"]] -->
<p class="font-features-['smcp','onum'] ...">This text uses small caps and oldstyle numbers.</p>

使用 CSS 变量

使用 font-features-(<custom-property>) 语法，从 CSS 变量应用字体特性设置：

<!-- [!code classes:font-features-(--my-features)] -->
<p class="font-features-(--my-features) ...">
  <!-- ... -->
</p>

响应式设计

使用 md: 等断点变体前缀，即可让 font-feature-settings 工具类仅在中等及以上屏幕尺寸下生效：

<p class="font-features-['tnum'] md:font-features-['smcp'] ...">
 Lorem ipsum dolor sit amet...
</p>

在变体文档中了解更多关于使用变体的信息。