font-weight
CSS
property sets the weight (or boldness) of the font. The weights available depend on the
font-family
that is currently set.
/* Keyword values */ font-weight: normal; font-weight: bold; /* Keyword values relative to the parent */ font-weight: lighter; font-weight: bolder; /* Numeric keyword values */ font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400;// normal font-weight: 500; font-weight: 600; font-weight: 700;// bold font-weight: 800; font-weight: 900; /* Global values */ font-weight: inherit; font-weight: initial; font-weight: unset;
font-weight
property is specified using any one of the values listed below.
normal
400
.
bold
700
.
lighter
bolder
<number>
<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 using the
回退权重
system.
CSS Fonts Level 4 extends the syntax to accept any number between 1 and 1000 and introduces 变量字体 , which can make use of this much finer-grained range of font weights.
If the exact weight given is unavailable, then the following rule is used to determine the weight actually rendered:
400
and
500
inclusive:
500
, in ascending order.
500
, in ascending order.
400
is given, look for available weights less than the target, in descending order. If no match is found, look for available weights greater than the target, in ascending order.
500
is given, look for available weights greater than the target, in ascending order. If no match is found, look for available weights less than the target, in descending order.
当
lighter
or
bolder
is specified, the below chart shows how the absolute font weight of the element is determined.
Note that when using relative weights, only four font weights are considered — thin (100), normal (400), bold (700), and heavy (900). If a font-family has more weights available, they are ignored for the purposes of relative weight calculation.
| 继承值 |
bolder
|
lighter
|
|---|---|---|
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |
The numerical values
100
to
900
roughly correspond to the following common weight names (see the
OpenType specification
):
| 值 | Common weight name |
|---|---|
| 100 | Thin (Hairline) |
| 200 | Extra Light (Ultra Light) |
| 300 | 灯光 |
| 400 | Normal (Regular) |
| 500 | Medium |
| 600 | Semi Bold (Demi Bold) |
| 700 | Bold |
| 800 | Extra Bold (Ultra Bold) |
| 900 | Black (Heavy) |
| 950 | Extra Black (Ultra Black) |
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 a 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 widths.
For the example below to work, you'll need a browser that supports the CSS Fonts Level 4 syntax in which font-weight can be any number between 1 and 1000.
<header>
<input type="range" id="weight" name="weight" min="1" max="1000" />
<label for="weight">Weight</label>
</header>
<div class="container">
<p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
</div>
/*
Mutator Sans is created by LettError (https://github.com/LettError/mutatorSans)
and is used here under the terms of its license:
https://github.com/LettError/mutatorSans/blob/master/LICENSE
*/
@font-face {
src: url('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf');
font-family:'MutatorSans';
font-style: normal;
}
label {
font: 1rem monospace;
white-space: nowrap;
}
.container {
max-height: 150px;
overflow-y: auto;
}
.sample {
text-transform: uppercase;
font: 1.5rem 'MutatorSans', sans-serif;
}
html, body {
max-height: 100vh;
max-width: 100vw;
overflow: hidden;
}
body {
display: flex;
flex-direction: column;
}
header {
margin-bottom: 1.5rem;
}
.container {
flex-grow: 1;
}
.container > p {
margin-top: 0;
margin-bottom: 0;
}
let weightLabel = document.querySelector('label[for="weight"]');
let weightInput = document.querySelector('#weight');
let sampleText = document.querySelector('.sample');
function update() {
weightLabel.textContent = `font-weight: ${weightInput.value};`;
sampleText.style.fontWeight = weightInput.value;
}
weightInput.addEventListener('input', update);
update();
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
.
| 初始值 |
normal
|
|---|---|
| 适用于 |
所有元素。它还适用于
::first-letter
and
::first-line
.
|
| 继承 | yes |
| 计算值 |
the keyword or the numerical value as specified, with
bolder
and
lighter
transformed to the real value
|
| 动画类型 | a font weight |
<font-weight-absolute> | bolder | lighterwhere
<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]>
<p> Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice "without pictures or conversations?" </p> <div>I'm heavy<br/> <span>I'm lighter</span> </div>
/* Set paragraph text to be bold. */
p {
font-weight: bold;
}
/* Set div text to two steps heavier than
normal but less than a standard bold. */
div {
font-weight: 600;
}
/* Set span text to be one step lighter
than its parent. */
span {
font-weight: lighter;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Fonts Module Level 4
The definition of 'font-weight' in that specification. |
工作草案 |
定义
font-weight
to accept any numbers between 1 and 1000.
|
|
CSS Fonts Module Level 3
The definition of 'font-weight' in that specification. |
候选推荐 | 无变化。 |
|
CSS Level 2 (Revision 1)
The definition of 'font-weight' in that specification. |
推荐 | 无变化。 |
|
CSS Level 1
The definition of 'font-weight' in that specification. |
推荐 | 初始定义。 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
font-weight
|
Chrome 完整支持 2 | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 3 | Opera 完整支持 3.5 | Safari 完整支持 1 | WebView Android 完整支持 1 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 10.1 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
<number>
syntax
|
Chrome 完整支持 62 | Edge 完整支持 17 | Firefox 完整支持 61 | IE 不支持 No | Opera 完整支持 49 | Safari 完整支持 11 | WebView Android 完整支持 62 | Chrome Android 完整支持 62 | Firefox Android 完整支持 61 | Opera Android 完整支持 46 | Safari iOS 完整支持 11 | Samsung Internet Android 完整支持 8.0 |
完整支持
不支持
font
font-family
font-feature-settings
font-kerning
font-language-override
font-optical-sizing
font-size
font-size-adjust
font-smooth
font-stretch
font-style
font-synthesis
font-variant
font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-ligatures
font-variant-numeric
font-variant-position
font-variation-settings
font-weight
line-height
line-height-step