Skip to content
全部文档

font-feature-settings ​

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

快速参考 ​

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

示例 ​

基础示例 ​

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

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

启用多项特性 ​

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

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

使用 CSS 变量 ​

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

html
<p class="font-features-(--my-features) ...">
  <!-- ... -->
</p>

响应式设计 ​

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

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

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

文档译文以 MIT 协议授权;原文版权归 Tailwind Labs。湘ICP备2026005453号-2