Кратко
СкопированоСвойство font задаёт насыщенность шрифта: от самого тонкого до самого жирного начертания.
Примеры
СкопированоКлючевые слова:
div { font-weight: normal; font-weight: bold;}
div {
font-weight: normal;
font-weight: bold;
}
Значения относительно родительского элемента:
div { font-weight: lighter; font-weight: bolder;}
div {
font-weight: lighter;
font-weight: bolder;
}
Значения в цифрах:
div { font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; font-weight: 500; font-weight: 600; font-weight: 700; font-weight: 800; font-weight: 900;}
div {
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
}
Как понять
СкопированоБольшинство шрифтов имеют два варианта начертания: обычное normal и жирное bold. Их в основном и используют.
Но браузер может отобразить и более тонкие или толстые варианты, если шрифт их поддерживает. Такие варианты задаются с помощью слов lighter и bolder или в условных единицах от сверхсветлого начертания 100 до сверхжирного или «чёрного» 900 с шагом 100 единиц.
Как пишется
СкопированоТолщину текста можно задать с помощью ключевых слов или числовым значением:
normal— стандартная толщина шрифта. Соответствует значению 400. Значение по умолчанию.bold— жирный набор текста. Соответствует 700.lighter— более тонкий вариант, чем в родительском элементе. Например, светлое начертание Light.bolder— более насыщенный вариант, чем в родительском элементе. Например, сверхжирное начертание Extra Bold.100,200,300,400,500,600,700,800,900— условные единицы насыщенности, где 400 — это стандартная насыщенность текста. Используются редко, так как большинство шрифтов имеют только обычное и жирное написание.
Подсказки
Скопировано💡 Если всё же решишь использовать цифры, но у выбранного шрифта нет такого варианта насыщенности, то для значений от 100 до 500 браузер выберет стандартный вариант normal, а от 600 до 900 — жирный шрифт bold.
Ещё примеры
СкопированоПопробуем задать насыщенность сразу разными способами к разным элементам кода:
<body> <h1>Шрифт этого заголовка — жирный. Мы задали его с помощью ключевого слова bold. В цифровом значении он равен 700 единицам.</h1> <p> Это текст стандартной толщины внутри контейнера <p>. Он эквивалентен 400 единицам толщины.</p> <div> Это текст внутри контейнера <div> — и он чуть толще, чем стандартный normal, но тоньше, чем bold. Мы задали его насыщенность с помощью значения 500.<br> <span>В контейнере <span> шрифт тоньше, чем в <div>, внутри которого он находится. Его мы задали с помощью значения lighter.</span> </div></body>
<body>
<h1>Шрифт этого заголовка — жирный. Мы задали его с помощью ключевого слова bold.
В цифровом значении он равен 700 единицам.</h1>
<p> Это текст стандартной толщины внутри контейнера <p>.
Он эквивалентен 400 единицам толщины.</p>
<div>
Это текст внутри контейнера <div> — и он чуть толще, чем стандартный normal,
но тоньше, чем bold. Мы задали его насыщенность с помощью значения 500.<br>
<span>В контейнере <span> шрифт тоньше, чем в <div>, внутри которого он находится.
Его мы задали с помощью значения lighter.</span>
</div>
</body>
body { font-family: "Roboto", sans-serif;}/* Зададим толщину заголовка с помощью слова bold. */h1 { font-weight: bold;}/* Обычный текст в абзаце <p> сделаем стандартным normal */p { font-weight: normal;}/* В контейнере <div> текст будет средним по жирности между normal и bold */div { font-weight: 500;}/* В элементе <span> текст будет на один уровень меньше по жирности,чем у родительского элемента, внутри которого он находится */span { font-weight: lighter;}
body {
font-family: "Roboto", sans-serif;
}
/* Зададим толщину заголовка с помощью слова bold. */
h1 {
font-weight: bold;
}
/* Обычный текст в абзаце <p> сделаем стандартным normal */
p {
font-weight: normal;
}
/* В контейнере <div> текст будет средним по жирности между normal и bold */
div {
font-weight: 500;
}
/* В элементе <span> текст будет на один уровень меньше по жирности,
чем у родительского элемента, внутри которого он находится */
span {
font-weight: lighter;
}
На практике
Скопированосоветует
Скопировано🛠 У каждого значения насыщенности есть своё название, принятое в типографике.
Распространённые названия насыщенности
100— тонкое начертание (thin, hairline);200— сверхсветлое (extra light, ultra light);300— светлое (light);400— нормальное (normal, regular, book);500— среднее (medium);600— полужирное (semi bold, demi bold);700— жирное (bold);800— сверхжирное (extra bold, ultra bold);900— тяжёлое (black, heavy).
В большинстве графических редакторов насыщенность шрифта для блока с текстом указана в цифрах, поэтому удобнее использовать в коде цифровое значение.
Чтобы использовать все 9 начертаний (100–900), шрифт должен их поддерживать. В противном случае браузер будет подбирать ближайшее подходящее начертание из тех, что есть в подключаемом шрифте и поэтому надёжнее использовать то значение font, которое вы указали в директиве font.
Например, у всеми известного шрифта Roboto, нет насыщенности шрифта равной 800, поэтому при выборе данного значения браузер будет показывать 900, как ближайшее корректное значение.
советует
Скопировано🛠 Большинство современных шрифтов имеет полный набор начертаний. Для более тонкого управления отображением шрифта используются как раз таки цифровые значения для свойства font.
🛠 Относительные значения bolder и lighter не используются почти никогда. Причина в том, что они относительные. Как итог если меняется вес шрифта родительского элемента — меняется вес шрифта ребёнка. Но это, чаще всего, не то что нужно. Совет: используй всегда абсолютный вес шрифта.