font-weight

在此页

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

font-weight CSS descriptor allows authors to specify font weights for the fonts specified in the @font-face rule. The font-weight property can separately be used to set how thick or thin characters in text should be displayed.

For a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the font-weight descriptor to explicitly specify the font face's weights. The values for the CSS descriptor is same as that of its corresponding font property.

There are generally limited weights available for a particular font family. When a specified weight doesn't exist, a nearby weight is used. Fonts lacking bold are often synthesized by the user agent. To prevent this, use font-synthesis 特性。

句法

/* Single values */
font-weight: normal;
font-weight: bold;
font-weight: 400;
/* Multiple Values */
font-weight: normal bold;
font-weight: 300 500;

font-weight property is described using any one of the values listed below.

值

normal: 正常字体粗细。如同 400 .
bold: Bold font weight. Same as 700 .
<number>: A <number> value between 1 and 1000, inclusive. Higher numbers represent weights that are bolder than (or as bold as) lower numbers. Certain commonly used values correspond to common weight names, as described in the 常见权重名称映射以下章节。

In earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g. 451) will be translated to one of these values for non-variable fonts.

CSS Fonts Level 4 extends the syntax to accept any number between 1 and 1000, inclusive, and introduces 变量字体 , which can make use of this much finer-grained range of font weights.

常见权重名称映射

The numerical values 100 to 900 roughly correspond to the following common weight names:

Value	Common weight name
100	Thin (Hairline)
200	Extra Light (Ultra Light)
300	Light
400	Normal
500	Medium
600	Semi Bold (Demi Bold)
700	Bold
800	Extra Bold (Ultra Bold)
900	Black (Heavy)

变量字体

Most fonts have a particular weight which corresponds to one of the numbers in 常见权重名称映射 . However some fonts, called variable fonts, can support a range of weights with more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.

For TrueType or OpenType variable fonts, the "wght" variation is used to implement varying weights.

可访问性关注

People experiencing low vision conditions may have difficulty reading text set with a font-weight value of 100 (Thin/Hairline) or 200 (Extra Light), especially if the font has a low contrast color ratio .

形式定义

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

形式句法

<font-weight-absolute>{1,2}where 
<font-weight-absolute> = normal | bold | <number <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[1,1000]>

范例

Setting normal font weight in a @font-face rule

The following finds a local Open Sans font or imports it, and allows using the font for normal font weights.

@font-face {
  font-family: "Open Sans";
  src: local("Open Sans") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-weight: 400;
}

规范

规范	状态	注释
CSS Fonts Module Level 4 The definition of 'font-weight' in that specification.	工作草案
CSS Fonts Module Level 3 The definition of 'font-weight' 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-weight`	Chrome 完整支持 4	Edge 完整支持 12	Firefox 完整支持 3.5	IE 完整支持 4	Opera 完整支持 10	Safari 完整支持 3.1	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 10.1	Safari iOS 完整支持 2	Samsung Internet Android 完整支持 1.0

图例

完整支持

另请参阅

元数据

最后修改： Oct 26, 2020

CSS
CSS 参考
CSS 字体
指南
1. OpenType font features guide
2. Variable fonts guide
At-Rules
1. @font-face
2. @font-feature-values
特性

在此页

句法

值