文字與排版

字型特性設定font-feature-settings

Controlling advanced typographic features in OpenType fonts.

Class	Declarations
`font-feature-settings:normal`	`font-feature-settings: normal;`
`font-feature-settings:<value>,<font-feature>`	`font-feature-settings: <value>,<font-feature>;`
`font-feature-settings:'salt'`	`font-feature-settings: 'salt';`
`font-feature-settings:'tnum'`	`font-feature-settings: 'tnum';`

Examples

Use font-feature-settings:* to pass OpenType feature tags directly to font-feature-settings.

<span class="font-feature-settings:'tnum'">1234567890</span>

Generated CSS

@layer utilities {    .font-feature-settings\:\'tnum\' {        font-feature-settings: 'tnum'    }}

Use font-feature-settings:normal when a nested element should not inherit custom feature settings.

<span class="font-feature-settings:'tnum'">    <span class="font-feature-settings:normal">Reset</span></span>

For common numeric features, prefer tabular-nums or related numeric utilities because they are easier to read than raw feature tags.

<span class="tabular-nums">12:45</span>

Define font-feature-* tokens when a feature combination is shared across several typographic treatments.

@theme {    --font-feature-tabular: "tnum";}

<span class="font-feature-settings:tabular">1234567890</span>

Apply styles based on different states using selectors and conditional queries.

<span class="font-feature-settings:'tnum':hover font-feature-settings:normal@sm font-feature-settings:normal@print">...</span>

Setting the font for an element.

Setting the font size of elements.