在此页

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

font-variation-settings CSS descriptor allows authors to specify low-level OpenType or TrueType font variations in the @font-face rule.

句法

/* Use the default settings */
font-variation-settings: normal;
/* Set values for OpenType axis names */
font-variation-settings: "xhgt" 0.7;
					

值

normal

Text is laid out using default settings.

<string> <number>

When rendering text, the list of OpenType axis names is passed to the text layout engine to enable or disable font features. Each setting is always a <string> of 4 ASCII characters, followed by a <number> indicating the axis value. If the <string> has more or fewer characters or contains characters outside the U+20 - U+7E codepoint range, the whole property is invalid. The <number> can be fractional or negative.

形式定义

相关 at-rule	@font-face
初始值	normal
计算值	如指定

形式句法

normal | [ <string> <number> ]#
					

范例

Setting font weight and stretch in a @font-face rule

@font-face {
  font-family: 'OpenTypeFont';
  src: url('open_type_font.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-variation-settings: 'wght' 400, 'wdth' 300;
}
					

规范

规范	状态	注释
CSS Fonts Module Level 4 The definition of 'font-variation-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-variation-settings	Chrome 完整支持 62	Edge 完整支持 79	Firefox 完整支持 62 完整支持 62 不支持 60 — 62 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 49	Safari 不支持 No	WebView Android 完整支持 62	Chrome Android 完整支持 62	Firefox Android 完整支持 62 完整支持 62 不支持 60 — 62 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 46	Safari iOS 不支持 No	Samsung Internet Android 完整支持 8.0

图例

完整支持

完整支持

不支持

不支持

用户必须明确启用此特征。

用户必须明确启用此特征。

另请参阅

• font-display
• font-family
• font-stretch
• font-style
• font-weight
• font-variant
• font-feature-settings
• src
• unicode-range

元数据

• 最后修改： Jul 22, 2020

相关话题

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