排版
font-feature-settings
用于控制高级排版功能的实用工具。
| 类 | 样式 |
|---|---|
font-features-[<value>] | font-feature-settings: <value>; |
font-features-(<custom-property>) | font-feature-settings: var(<custom-property>); |
示例(Examples)
基本示例(Basic example)
使用 font-features-[<value>] 工具来启用支持 OpenType 功能的字体：
<p class="font-features-['smcp'] ...">This text uses small caps.</p>启用多个功能(Enabling multiple features)
你可以通过用逗号分隔来启用多个 OpenType 功能：
🌐 You can enable multiple OpenType features by separating them with commas:
<p class="font-features-['smcp','onum'] ...">This text uses small caps and oldstyle numbers.</p>使用 CSS 变量(Using CSS variables)
使用 font-features-(<custom-property>) 语法从 CSS 变量应用字体特性设置：
<p class="font-features-(--my-features) ..."> <!-- ... --></p>响应式设计(Responsive design)
在 font-feature-settings 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<p class="font-features-['tnum'] md:font-features-['smcp'] ..."> Lorem ipsum dolor sit amet...</p>请参阅 变体文档 详细了解如何使用变体。