font-feature-settings

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

font-feature-settings 属性用于控制 OpenType 字体中的高级印刷功能。

尝试一下

语法

css
/* 默认设置 */
font-feature-settings: normal;

/* 设置 OpenType 功能标签的值 */
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;
font-feature-settings:
  "smcp",
  "swsh" 2;

/* 全局值 */
font-feature-settings: inherit;
font-feature-settings: initial;
font-feature-settings: unset;

备注: Web 开发者应该尽可能的使用类似 font-variant 这样的短标记属性或者相关的速记标识属性等,类似 font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric or font-variant-position.

该属性是一个比较偏底层的功能接口,用于解决由于没有其他方法去访问和设置 OpenType 字体某些特性而无法解决一些特殊功能需求。

特别需要注意的是,该 CSS 属性不应该用来开启大写字母转换。

初始值normal
适用元素所有元素和文本. It also applies to ::first-letter and ::first-line.
是否是继承属性
计算值as specified
动画类型离散值

normal

文本使用默认设置进行布局。

<feature-tag-value>

在呈现文本时,OpenType 要素标记值的列表被传递到文本布局引擎以启用或禁用字体特征。标签始终是 4 个 ASCII 字符的 <string> 。如果是 U + 20 - U + 7E 代码点范围以外的字符或字符个数不对,则整个属性无效。 值是一个正整数。两个关键字 on 和 off 分别是 1 和 0 的同义词。如果未设置任何值,则默认值为 1。对于非布尔型 OpenType 功能(例如,文体替代 stylistic alternates),该值意味着要选择特定的字形;对于布尔值,它是一个开关。

形式语法

font-feature-settings = 
normal |
<feature-tag-value>#

<feature-tag-value> =
<opentype-tag> [ <integer [0,∞]> | on | off ]?

<opentype-tag> =
<string>

实例

css
/* use small-cap alternate glyphs */
.smallcaps {
  font-feature-settings: "smcp" on;
}

/* convert both upper and lowercase to small caps (affects punctuation also) */
.allsmallcaps {
  font-feature-settings: "c2sc", "smcp";
}

/* enable historical forms */
.hist {
  font-feature-settings: "hist";
}

/* disable common ligatures, usually on by default */
.noligs {
  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 */
.fancystyle {
  font-family: Gabriola; /* available on Windows 7, and on Mac OS */
  font-feature-settings: "ss07";
}

规范

Specification
CSS Fonts Module Level 4
# font-feature-settings-prop

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-feature-settings
normal

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

其他参考