在此页

• 句法
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

font-feature-settings CSS property controls advanced typographic features in OpenType fonts.

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.

句法

/* Use the default settings */
font-feature-settings: normal;
/* Set values for OpenType feature tags */
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;
font-feature-settings: "smcp", "swsh" 2;
/* Global values */
font-feature-settings: inherit;
font-feature-settings: initial;
font-feature-settings: unset;
					

Whenever possible, Web authors should instead use the font-variant shorthand property or an associated longhand property such as font-variant-ligatures , font-variant-caps , font-variant-east-asian , font-variant-alternates , font-variant-numeric or font-variant-position .

These lead to more effective, predictable, understandable results than font-feature-settings , which is a low-level feature designed to handle special cases where no other way exists to enable or access an OpenType font feature. In particular, font-feature-settings shouldn't be used to enable small caps.

值

normal

Text is laid out using default settings.

<feature-tag-value>

When rendering text, the list of OpenType feature tag value is passed to the text layout engine to enable or disable font features. The tag is always a <string> of 4 ASCII characters. If it has more or less characters, or if it contains characters outside the U+20 – U+7E codepoint range, the whole property is invalid.
The value is a positive integer. The two keywords on and off are synonyms for 1 and 0 respectively. If no value is set, the default is 1 . For non-Boolean OpenType features (e.g. stylistic alternates ), the value implies a particular glyph to be selected; for Boolean values, it is a switch.

形式定义

初始值	normal
适用于	所有元素。它还适用于 ::first-letter and ::first-line .
继承	yes
计算值	如指定
动画类型	discrete

形式句法

normal | <feature-tag-value>#
where 
<feature-tag-value> = <string> [ <integer> | on | off ]?
					

范例

Enabling various font features

/* 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"; }
/* use zeros with a slash through them to differentiate from "O" */
.nicezero { font-feature-settings: "zero"; }
/* 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";
}
					

规范

规范	状态	注释
CSS Fonts Module Level 3 The definition of 'font-feature-settings' in that specification.	候选推荐	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
font-feature-settings	Chrome 完整支持 48	Edge 完整支持 15	Firefox 完整支持 34 注意事项 完整支持 34 注意事项 注意事项 ISO/IEC CD 14496-22 3rd edition suggests using the ssty feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the MathML rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the dtls feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS. 完整支持 15 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -moz- 注意事项 From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4 .	IE 完整支持 10	Opera 完整支持 35	Safari 完整支持 9.1 完整支持 9.1 不支持 4 — 6	WebView Android 完整支持 4.4	Chrome Android 完整支持 48	Firefox Android 完整支持 34 注意事项 完整支持 34 注意事项 注意事项 ISO/IEC CD 14496-22 3rd edition suggests using the ssty feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the MathML rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the dtls feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS. 完整支持 15 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -moz- 注意事项 From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4 .	Opera Android 完整支持 35	Safari iOS 完整支持 9.3 完整支持 9.3 不支持 3.2 — 6.1	Samsung Internet Android 完整支持 5.0

图例

完整支持

完整支持

见实现注意事项。

见实现注意事项。

要求使用供应商前缀或不同名称。

要求使用供应商前缀或不同名称。

另请参阅

• font-display
• font-family
• font-stretch
• font-style
• font-weight
• font-variant
• font-variation-settings
• src
• unicode-range
• OpenType Feature Tags list
• Using the whole font
  ( 注意： -moz syntax is the old one. On Gecko, use the -ms syntax but with -moz .)

元数据

• 最后修改： 2020 年 7 月 17 日

相关话题

1. CSS
2. CSS 参考
3. CSS 字体
4. 指南

   1. OpenType font features guide
   2. Variable fonts guide
5. At-Rules

   1. @font-face
   2. @font-feature-values
6. 特性

   1. font
   2. font-family
   3. font-feature-settings
   4. font-kerning
   5. font-language-override
   6. font-optical-sizing
   7. font-size
   8. font-size-adjust
   9. font-smooth
   10. font-stretch
   11. font-style
   12. font-synthesis
   13. font-variant
   14. font-variant-alternates
   15. font-variant-caps
   16. font-variant-east-asian
   17. font-variant-ligatures
   18. font-variant-numeric
   19. font-variant-position
   20. font-variation-settings
   21. font-weight
   22. line-height
   23. line-height-step