font-feature-settings
font-feature-settings
属性用于控制OpenType字体中的高级印刷功能。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
语法
/* 默认设置 */
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;
Note: Web开发者应该尽可能的使用类似
该属性是一个比较偏底层的功能接口,用于解决由于没有其他方法去访问和设置OpenType字体某些特性而无法解决一些特殊功能需求.
特别需要注意的是,该CSS属性不应该用来开启大写字母转换.
font-variant
这样的短标记属性或者相关的速记标识属性等, 类似 font-variant-ligatures
, font-variant-caps
, font-variant-east-asian
(en-US), font-variant-alternates
, font-variant-numeric
or font-variant-position
.该属性是一个比较偏底层的功能接口,用于解决由于没有其他方法去访问和设置OpenType字体某些特性而无法解决一些特殊功能需求.
特别需要注意的是,该CSS属性不应该用来开启大写字母转换.
初始值 | normal |
---|---|
适用元素 | all elements. It also applies to ::first-letter and ::first-line . |
是否是继承属性 | yes |
计算值 | as specified |
Animation type | discrete |
值
normal
- 文本使用默认设置进行布局。
<feature-tag-value>
- 在呈现文本时,OpenType要素标记值的列表被传递到文本布局引擎以启用或禁用字体特征。标签始终是4个ASCII字符的
<string>
。如果是U + 20 - U + 7E代码点范围以外的字符或字符个数不对,则整个属性无效。
值是一个正整数。两个关键字on和off分别是1和0的同义词。如果未设置任何值,则默认值为1。对于非布尔型OpenType功能(例如,文体替代 stylistic alternates),该值意味着要选择特定的字形;对于布尔值,它是一个开关。
形式语法
实例
/* 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 | Status | Comment |
---|---|---|
CSS Fonts Module Level 3 font-feature-settings |
Recommendation | Initial definition |
浏览器兼容性
BCD tables only load in the browser
其他参考
- FontFont OpenType User Guide (pdf)
- OpenType Feature Tags 列表
- Using the whole font ( -moz语法是旧的。在Gecko上,使用-ms语法,但使用-moz ).