- font-weight
- Синтаксис
- Значения
- Объектная модель
- Браузеры
- font-weight
- Try it
- Syntax
- Values
- Fallback weights
- Meaning of relative weights
- Common weight name mapping
- Variable fonts
- Accessibility concerns
- Formal definition
- Formal syntax
- Examples
- Setting font weights
- HTML
- CSS
- Result
- Specifications
- Browser compatibility
- See Also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
- font-weight
- Syntax
- Values
- Common weight name mapping
- Variable fonts
- Accessibility concerns
- Formal definition
- Formal syntax
- Examples
- Setting normal font weight in a @font-face rule
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
- font-weight
- Синтаксис
- Значения свойства
font-weight
Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.
Синтаксис
Значения
Насыщенность шрифта задаётся с помощью ключевых слов: bold — полужирное начертание, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.
HTML5 CSS2.1 IE Cr Op Sa Fx
Duis te feugifacilisi
, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства font-weight
Объектная модель
[window.]document.getElementById(» elementID «).style.fontWeightБраузеры
Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold , normal и lighter . На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.
font-weight
The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.
Try it
Syntax
/* 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: revert; font-weight: revert-layer; font-weight: unset;
The font-weight property is specified using any one of the values listed below.
Values
Normal font weight. Same as 400 .
Bold font weight. Same as 700 .
One relative font weight lighter than the parent element. Note that only four font weights are considered for relative weight calculation; see the Meaning of relative weights section below.
One relative font weight heavier than the parent element. Note that only four font weights are considered for relative weight calculation; see the Meaning of relative weights section below.
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 Fallback weights system.
CSS Fonts Level 4 extends the syntax to accept any number between 1 and 1000 and introduces Variable fonts, which can make use of this much finer-grained range of font weights.
Fallback weights
If the exact weight given is unavailable, then the following rule is used to determine the weight actually rendered:
- If the target weight given is between 400 and 500 inclusive:
- Look for available weights between the target and 500 , in ascending order.
- If no match is found, look for available weights less than the target, in descending order.
- If no match is found, look for available weights greater than 500 , in ascending order.
Meaning of relative weights
When 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.
Inherited value 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 Common weight name mapping
The numerical values 100 to 900 roughly correspond to the following common weight names (see the OpenType specification):
Value Common weight name 100 Thin (Hairline) 200 Extra Light (Ultra Light) 300 Light 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) Variable fonts
Most fonts have a particular weight which corresponds to one of the numbers in Common weight name mapping. 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.
Note: 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 . The demo loads with font-weight: 500; . Change the value to see the weight of the text change.
Accessibility concerns
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.
Formal definition
Initial value normal Applies to all elements. It also applies to ::first-letter and ::first-line . Inherited yes Computed value the keyword or the numerical value as specified, with bolder and lighter transformed to the real value Animation type a font weight Formal syntax
font-weight =
|
bolder |
lighter=
normal |
bold |Examples
Setting font weights
HTML
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 heavybr /> span>I'm lighterspan> div>
CSS
/* 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; >
Result
Specifications
Browser compatibility
BCD tables only load in the browser
See Also
Found a content problem with this page?
This page was last modified on Feb 21, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.font-weight
The font-weight CSS descriptor allows authors to specify font weights for the fonts specified in the @font-face at-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 typeface are often synthesized by the user agent. To prevent this, use the font-synthesis shorthand property.
Syntax
/* Single values */ font-weight: normal; font-weight: bold; font-weight: 400; /* Multiple Values */ font-weight: normal bold; font-weight: 300 500;
The font-weight property is described using any one of the values listed below.
Values
Normal font weight. Same as 400 .
Bold font weight. Same as 700 .
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 Variable fonts, which can make use of this much finer-grained range of font weights.
Common weight name mapping
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) Variable fonts
Most fonts have a particular weight which corresponds to one of the numbers in Common weight name mapping. 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.
Accessibility concerns
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.
Formal definition
Formal syntax
Examples
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; >
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Jul 7, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.font-weight
CSS свойство font-weight позволяет указать, насколько жирным будут выглядеть текст. Как вы знаете, жирный текст выглядит темнее и немного толще, чем обычный. Вы можете использовать жирный текст для любого тега, задав свойству значение bold .
Если у вас есть элемент, для которого по умолчанию задан жирный шрифт, или он наследует такой шрифт от родительского элемента, то можно уменьшить насыщенность шрифта с помощью значения normal .
Для свойства font-weight предусмотрены также два относительных значения: bolder и lighter . Они сделают текст более или менее плотным по сравнению с унаследованным значением. Эти значения используются редко, так как немногие шрифты поддерживают столь слабые различия в плотности.
Вы также можете устанавливать значения свойства с помощью чисел от 100 до 900, но это тоже не очень хорошо поддерживается шрифтами и браузерами и редко применяется.
Значение по умолчанию: normal Применяется: ко всем элементам Анимируется: да Наследуется: да Версия: CSS1 Синтаксис JavaScript: object.style.fontWeight=»900″ Синтаксис
font-weight: normal|bold|bolder|lighter|число|inherit;
Значения свойства
Значение Описание normal Определяет стандартное написание символов. bold Задает жирное начертание символов в тексте. bolder Тоже самое, что и bold. lighter тоже самое, что и normal. 100
200
300
400
500
600
700
800
900Определяет толщину шрифта по заданному значению, от 0 до 500 — стандартное начертание шрифта, от 600 до 900 — жирное начертание. inherit Указывает, что значение наследуется от родительского элемента.