在此页

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

font-variation-settings CSS property provides low-level control over variable font characteristics, by specifying the four letter axis names of the characteristics you want to vary, along with their values.

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-variation-settings: normal;
/* Set values for variable font axis names */
font-variation-settings: "XHGT" 0.7;
/* Global values */
font-variation-settings: inherit;
font-variation-settings: initial;
font-variation-settings: unset;
					

值

This property's value can take one of two forms:

normal

Text is laid out using default settings.

<string> <number>

When rendering text, the list of variable font axis names is passed to the text layout engine to enable or disable font features. Each setting is always one or more pairs consisting of a <string> of 4 ASCII characters followed by a <number> indicating the axis value to set. 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, depending on the value range available in your font, as defined by the font designer.

描述

This property is a low-level mechanism designed to set variable font features where no other way to enable or access those features exist. You should only use it when no basic properties exist to set those features (e.g. font-weight , font-style ).

Font characteristics set using font-variation-settings will always override those set using the corresponding basic font properties, e.g. font-weight , no matter where they appear in the cascade. In some browsers, this is currently only true when the @font-face declaration includes a font-weight range.

Registered and custom axes

Variable font axes come in two types: registered and custom .

Registered axes are the most commonly encountered — common enough that the authors of the specification felt they were worth standardizing. Note that this doesn't mean that the author has to include all of these in their font.

Here are the registered axes along with their corresponding CSS properties:

Axis Tag	CSS Property
"wght"	font-weight
"wdth"	font-stretch
"slnt" (slant)	font-style : oblique + angle
"ital"	font-style : italic
"opsz"	font-optical-sizing

Custom axes can be anything the font designer wants to vary in their font, for example ascender or descender heights, the size of serifs, or anything else they can imagine. Any axis can be used as long as it is given a unique 4-character axis. Some will end up becoming more common, and may even become registered over time.

注意 : Registered axis tags are identified using lower-case tags, whereas custom axes should be given upper-case tags. Note that font designers aren't forced follow this practice in any way, and some won't. The important takeaway here is that axis tags are case-sensitive.

In order to use variable fonts on your operating system, you need to make sure that it is up to date. For example Linux OSes need the latest Linux Freetype version, and macOS prior to 10.13 does not support variable fonts. If your operating system is not up to date, you will not be able to use variable fonts in web pages or the Firefox Developer Tools.

形式定义

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

形式句法

normal | [ <string> <number> ]#
					

范例

You can find a number of other variable fonts examples at our Variable fonts guide , v-fonts.com ，和 axis-praxis.org .

Weight (wght)

The following live example's CSS can be edited to allow you to play with font weight values.

Slant (slnt)

The following live example's CSS can be edited to allow you to play with font slant/oblique values.

规范

规范	状态	注释
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 完整支持 17	Firefox 完整支持 62 完整支持 62 不支持 53 — 62 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 49	Safari 完整支持 11 注意事项 完整支持 11 注意事项 注意事项 Requires macOS 10.13 High Sierra or later.	WebView Android 完整支持 62	Chrome Android 完整支持 62	Firefox Android 完整支持 62 完整支持 62 不支持 53 — 62 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 46	Safari iOS 完整支持 11 注意事项 完整支持 11 注意事项 注意事项 Requires iOS 11 or later.	Samsung Internet Android 完整支持 8.0

图例

完整支持

完整支持

不支持

不支持

见实现注意事项。

见实现注意事项。

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

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

另请参阅

• Variable fonts guide
• OpenType Font Variations Overview
• OpenType Design-Variation Axis Tag Registry

元数据

• 最后修改： 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