font-weight — Веб-технологии для разработчиков
CSS свойство font-weight устанавливает начертание шрифта. Некоторые шрифты доступны только в нормальном или полужирном начертании.
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.
Синтаксис
font-weight: normal; font-weight: bold; /* Relative to the parent */ font-weight: lighter; font-weight: bolder; 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; /* Global values */ font-weight: inherit; font-weight: initial; font-weight: unset;
Значения
normal- Нормальное начертание. То же, что и
400. bold- Полужирное начертание. То же, что и
700. lighter- Изменяет начертание относительно насыщенности родительского элемента (сверхтонкое начертание).
bolder- Изменяет начертание относительно насыщенности родителя элемента (сверхжирное начертание).
100,200,300,400,500,600,700,800,900- Цифровые значения насыщенности шрифтов, которые позволяют задавать больше, чем нормальное и полужирное начертание.
Недоступность заданного значения
Если заданное цифровое значение насыщенности недоступно, для определения толщины отображемого шрифта используется следующий алгоритм:
- Если задано значение выше
500, будет использовано первое доступное более жирное начертание (если такого не окажется, то первое доступное более светлое). - Если задано значение менее
400, будет использовано первое доступное более светлое начертание (если такого не окажется, то первое доступное более жирное). - Если задано значение
400, будет применено500. Если500недоступно, то будет использован алгоритм для подбора значений менее400. - Если задано значение
500, будет применено400. Если400недоступно, то будет использован алгоритм для подбора значений менее400.
Это означает, что для шрифтов, которые предоставляют только normal и bold начертания, 100-500 normal, и 600-900 bold.
Значение относительных весов
Когда используется жирнее или светлее, следующая таблица используется для вычисления абсолютного веса элемента:
| наследуемое значение | жирнее | светлее |
|---|---|---|
| 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 |
Определение веса имени
Значения от 100 до 900, примерно, соответствуют следующим распространенным именам насыщенности:
| Значение | Общее название |
|---|---|
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) |
Интерполяция
Значения font-weight интерполируются с помощью дискретных шагов (кратные 100). Интерполяция происходит в действительном пространстве чисел и превращается в целое число путем округления до ближайшего числа, кратного 100, со значениями посредине между кратными 100 округленными в сторону положительной бесконечности.
Формальный синтаксис
<font-weight-absolute> | bolder | lighterгде
<font-weight-absolute> = normal | bold | <number>
Примеры
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 heavy<br/> <span>I'm lighter</span> </div>
CSS
/* Назначение тексту элемента <p> жирного начертания. */
p {
font-weight: bold;
}
/* Назначение тексту элемента <div> жирности, которая больше на два уровня,
чем normal, но все еще меньше, чем стандартный bold. */
div {
font-weight: 600;
}
/* Назначение тексту элемента <span> жирности,
которая на один уровень меньше, чем у его родителя. */
span {
font-weight: lighter;
}Result
Спецификации
Совместимость браузеров
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Базовая поддержка | 2.0 | 1.0 (1.7 или ранее) | 3.0 | 3.5 | 1.3 |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Базовая поддержка | 1.0 | 1.0 (1.0) | 6.0 | 6.0 | 3.1 |
bolder» для шрифтов со множеством начертаний / Хабр
Если вы используете шрифт со множеством начертаний, то вам, вероятно, захочется, чтобы тегиstrong и b не увеличивали жирность шрифта до фиксированного значения font-weight:700, как это происходит по-умолчанию, а использовали промежуточные значения, рассчитанные исходя из жирности шрифта родительского элемента.strong.
Возьмём для примера Open Sans.
Open Sans имеет пять начертаний: Light 300, Normal 400, Semi-Bold 600, Bold 700 и Extra-Bold 800.
Цифры соответствуют значению font-weight.
Пусть основной текст имеет начертание Light 300, заголовки и цитаты — Normal 400, а промо-блок — Semi-Bold 600:
body {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
h2, h3, h4, h5, h5, h6,
blockquote {
font-weight: 400;
}
.promo {
font-weight: 600;
}
Тег strong может встечаться и в основном тексте, и в цитатах, и промо-блоке. Надо это учесть.
По-умолчанию:
strong, b {
font-weight: bold; /* bold = 700 */
}
А нам хочется, чтобы у strong и b для основного текста было Normal 400, для цитат и заголовков — Bold 700, а для промо блока — Extra-Bold 800. Это сохранит контраст между жирным и нежирным текстом примерно равным во всех случаях.
Уверен, многие пробовали использовать strong {font-weight: bolder;}, но это не принесло ожидаемого результата — текст стал ещё жирнее, чем ожидалось.
А всё потому, что согласно спецификации, значение bolder (lighter) увеличивает (уменьшает) унаследованное значение font-weight до следующего возможного для данного шрифта значения, согласно следующей таблице.
| наследуемое значение | bolder | lighter |
|---|---|---|
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 700 | 100 | |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |
Но в браузерной CSS прописано strong, b {font-weight: bold;}, т.е. унаследуется значение «700», а потом оно ещё и увеличивается до «900». Поэтому кажется, что bolder работает неправильно.
Исправить это можно так:
/* сбрасываем стандартное «bold»,
шрифт становится таким же как его родительский элемент */
strong, b {
font-weight: inherit;
}
/* теперь bolder будет вычисляться исходя из веса шрифта родительского элемента */
strong, b {
font-weight: bolder;
}
Именно так, как два отдельных правила. Первое обнуляет значение font-weight
Теперь нам не придётся заботиться о вложенности элементов — каскад всё сделает автоматически. Мы можем вкладывать теги strong друг в друга.
Вложенные теги «strong». Толщина шрифта определяется исходя из значения родительского элемента.
Демка
Ограничения
Используя относительные значения
font-weight мы получаем только по три градации жирности шрифта для bolder и lighter соответственно. Спецификация не гарантирует, что браузеры правильно сопоставят названия начертаний и числовые значения. Не гарантирует, что для шрифта найдётся более жирное или более тонкое начертание. У некоторых шрифтов всего два начертания, у некоторых может быть восемь.Единственной гарантией при использовании bolder / lighter является то, что шрифт при значении «bolder» не будет тоньше, чем более легкие начертания этого шрифта, а при значении «
Чтобы более тонко настроить вес шрифта, надо использовать абсолютные значения.
Баги
Если у вас шрифт установлен в системе, но не подключен через
@font-face, то Google Chrome определяет только Normal и Bold начертания шрифта. Чтобы локальный шрифт заработал, нужно дополнительно указать его font-family..fw300 {
font-family: "Open Sans Light", "Open Sans";
font-weight: 300;
}
.fw600 {
font-family: "Open Sans SemiBold", "Open Sans";
font-weight: 600;
}
seodon.ru | CSS справочник — font-weight
Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
Свойство CSS font-weight используется для изменения жирности (веса, насыщенности) шрифта элемента. Поиск подходящего шрифта браузер осуществляет в пределах списка шрифтов заданных свойством font-family. Например для жирного шрифта Arial браузер будет искать в операционной системе пользователя шрифт Arial с пометкой «bold» или какой-то подобной.
Но тут не все так просто. Максимально допустимая шкала жирности шрифтов имеет девять градаций насыщенности, от самой светлой до самой темной. Но не у всех существующих шрифтов есть эти девять градаций, например один шрифт может иметь только две — regular и bold, другой три — regular, medium и bold, а третий вообще только одну. Причем эти пометки не обязательно называются именно так, допустим вместо regular может быть указано book, а вместо bold — black.
Но и это еще не все. Так как шрифты создавались в разное время, разными людьми и без каких-либо жестких стандартов, то у одного шрифта пометка regular может соответствовать его нормальной насыщенности, а bold — увеличенной. У другого, пометка bold — это нормальная жирность, а heavy — повышенная, так как он в принципе создавался, как жирный шрифт и не имеет светлых вариантов.
Поэтому свойство font-weight не определяет какую-то константу жирности одинаковую для всех шрифтов, оно только задает жирность шрифта и ее порядок в пределах данной гарнитуры.
Тип свойства
Назначение: шрифты.
Применяется: ко всем элементам.
Наследуется: да.
Значения
Значением свойства font-weight является указание жирности шрифта одним из следующих способов.
- Число — число от 100 до 900 с шагом в 100, где 100 — самый светлый, 400 — нормальный шрифт данной гарнитуры, 700 — жирный, а 900 — самый жирный. Если шрифт имеет менее девяти градаций, то браузеры объединяют несколько значений. Например, при font-weight равном 100, 200, 300 или 400 они могут использовать шрифт нормальной жирности, при 500 — повышенной, при 600, 700, 800, 900 — самой высокой.
- normal — нормальная жирность данной гарнитуры, аналог 400.
- bold — жирный шрифт, аналог 700.
- bolder — увеличивает жирность шрифта на 100 относительно наследуемой от родительского элемента. Если в данной гарнитуре такого шрифта нет, то устанавливается ближайший более жирный шрифт, который существует (если существует).
- lighter — уменьшает жирность шрифта на 100 относительно родительского элемента.
- inherit — наследует значение font-weight от родительского элемента.
Процентная запись: не существует.
Значение по умолчанию: normal.
При использовании font-weight: bolder или lighter необходимо учитывать, что дочерние элементы наследуют не эти значения, а те, которые получились в итоге.
Синтаксис
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
Пример CSS: использование font-weight
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS свойство font-weight</title>
<style type="text/css">
#div1 {
font-family: Times, serif; /* шрифт Times */
}
#div2 {
font-weight: bolder; /* увеличение жирности */
}
</style>
</head>
<body>
<div>
Шрифт Times с font-weight: 400.
<div>
Times с font-weight: bolder, у него это bold или 700.
<div>Times с font-weight: bold или 700.</div>
</div>
</div>
</body>
</html>Результат примера
Результат. Использование свойства CSS font-weight.
Версии CSS
| Версия: | CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
| Поддержка: | Да | Да | Да | Да |
Браузеры
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari | |
| Версия: | 6.0 и 7.0 | 8.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Частично | Да | Да | Да | Да | Да |
Internet Explorer 6.0 и 7.0 не понимают значение inherit.
Урок 4: Шрифтrustutorial — HTML.net
В этом уроке вы изучите работу со шрифтами с помощью CSS. Мы рассмотрим также вопрос о том, что конкретный шрифт, выбранный для web-сайта, может отображаться только в том случае, если этот шрифт установлен на PC, с которого выполняется доступ к этому web-сайту. Дано описание следующих CSS-свойств:
Семейство шрифта [font-family]
Свойство font-family указывает приоритетный список шрифтов,
используемых для отображения данного элемента или web-страницы. Если первый
шрифт списка не установлен на компьютере, с которого выполняется доступ к сайту,
ищется следующий шрифт списка, пока не будет найден подходящий.
Для категоризации шрифтов используются два типа имён: имя семейства/family-name и общее/родовое семейство/generic family. Эти два термина объясняются далее.
- Family-name
- Пример family-name (часто называемое просто «шрифт») это, например, «Arial», «Times New Roman» или «Tahoma».
- Generic family
- Его можно проще описать как группу family-names, имеющих характерные общие черты. Пример — sans-serif, набор шрифтов без «засечек/feet».
Разницу можно также проиллюстрировать так:
При указании шрифтов для вашего web-сайта вы, естественно, начинаете с предпочтительного шрифта, а затем перечисляете альтернативные. Рекомендуем в конце списка указывать родовое имя. Тогда страница, как минимум, будет отображена шрифтом того же семейства, если отсутствуют все специфицированные конкретные шрифты.
Список шрифтов может выглядеть так:
h2 {font-family: arial, verdana, sans-serif;}
h3 {font-family: "Times New Roman", serif;}
Заголовки <h2> будут отображаться шрифтом «Arial».
Если он не установлен на пользовательской машине, будет использоваться «Verdana».
Если недоступны оба шрифта, для показа заголовков будет использован шрифт
семейства sans-serif.
Обратите внимание, что имя шрифта «Times New Roman» содержит пробелы, поэтому указано в двойных кавычках.
Стиль шрифта [font-style]
Свойство font-style определяет normal, italic или oblique. В примере все заголовки <h3> будут показаны курсивом italic.
h2 {font-family: arial, verdana, sans-serif;}
h3 {font-family: "Times New Roman", serif; font-style: italic;}
Вариант шрифта [font-variant]
Свойство font-variant используется для выбора между вариантами normal и small-caps. Шрифт small-caps использует
малые заглавные буквы (upper case) вместо букв нижнего регистра. Непонятно?
Смотрите примеры:
Если font-variant имеет значение small-caps, а
шрифт small-caps недоступен, браузер, скорее всего, отобразит текст буквами
верхнего регистра.
h2 {font-variant: small-caps;}
h3 {font-variant: normal;}
Вес шрифта [font-weight]
Свойство font-weight описывает, насколько толстым, или «тяжёлым»,
должен отображаться шрифт. Шрифт может быть normal или bold.
Некоторые браузеры поддерживают даже числовые значения 100-900 (в сотнях) для
описания веса шрифта.
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
Размер шрифта [font-size]
Размер шрифта устанавливается свойством font-size.
Используются различные единицы измерения (например, пикселы и проценты) для описания размера шрифта. В данном учебнике мы будем использовать самые распространённые и удобные единицы измерения. Вот примеры:
h2 {font-size: 30px;}
h3 {font-size: 12pt;}
h4 {font-size: 120%;}
p {font-size: 1em;}
Есть одно отличие в указанных единицах измерения: ‘px‘ и ‘pt‘ дают абсолютное значение размера шрифта, а ‘%‘ и ‘em‘ — относительные. Многие пользователи не могут читать мелкий текст, по разным причинам. Чтобы сделать ваш web-сайт доступным для всех, вы должны использовать относительные значения, такие как ‘%‘ или ‘em‘.
Вот иллюстрация того, как настроить размер шрифта в Mozilla Firefox и Internet Explorer. Попробуйте сами — прекрасное свойство, как вы полагаете?
Сокращённая запись [font]
Используя сокращенную запись font, можно указывать все свойства
шрифта в одном стилевом правиле.
Например, вот четыре строки описания свойств шрифта для <p>:
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Используя сокращённую запись, код можно упростить:
p {
font: italic bold 30px arial, sans-serif;
}
Порядок свойств font таков:
font-style | font-variant | font-weight | font-size | font-family
Резюме
Вы познакомились с некоторыми свойствами шрифтов. Помните, что одной из важных возможностей при использовании CSS является то, что вы можете изменить шрифт для всего web-сайта всего за несколько минут. CSS экономит время и облегчает вам жизнь. В следующем уроке мы разберёмся с текстом.
<< Урок 3: Цвет и фон
Урок 5: Текст >>
CSS свойство font-weight
Пример
Установить различную толщину шрифта для трех абзацев:
p.normal {font-weight: normal; нормальный;
} Толщина
стр. {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
Определение и использование
Свойство font-weight устанавливает, насколько толстые или тонкие символы в тексте должны отображаться.
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
| Объект | |||||
|---|---|---|---|---|---|
| font-weight | 2,0 | 4,0 | 1,0 | 1,3 | 3.5 |
Синтаксис CSS
начертание шрифта: нормальный | жирный | жирный | светлее | номер | начальный | наследование;
Стоимость объекта
| Значение | Описание | Сыграй |
|---|---|---|
| нормальный | Определяет нормальные символы. Это по умолчанию | Играй » |
| полужирный | Определяет толстые символы | Играй » |
| смелее | Определяет более толстые символы | Играй » |
| зажигалка | Определяет более светлые символы | Играй » |
| 100 200 300 400 500 600 700 800 900 | Определяет от тонких до толстых символов.400 соответствует обычному значению, а 700 соответствует полужирному шрифту | .Играй » |
| начальный | Устанавливает для этого свойства значение по умолчанию. Читать про начальный | Играй » |
| унаследовать | Наследует это свойство от своего родительского элемента. Читать про наследство |
Связанные страницы
УчебникCSS: Шрифт CSS
Ссылка CSS: свойство шрифта
Ссылка на HTML DOM: свойство fontWeight
,
CSS: в чем разница между «жирным» и «жирным» стилями шрифта?
Переполнение стека- Товары
- Клиенты
- Случаи использования
- Переполнение стека Общественные вопросы и ответы
- Команды Частные вопросы и ответы для вашей команды
- предприятие Частные вопросы и ответы для вашего предприятия
- работы Программирование и связанные с ним возможности технической карьеры
- Талант Нанять технических талантов
- реклама Обратитесь к разработчикам по всему миру
Загрузка…
,font-weight | CSS-уловки
Свойство font-weight задает толщину или толщину шрифта и зависит либо от доступных начертаний шрифта в семействе шрифтов, либо от веса, определенного браузером.
пролет {
font-weight: жирный;
} Свойство font-weight принимает либо значение ключевого слова, либо предварительно определенное числовое значение. Доступные ключевые слова:
-
нормальный -
полужирный -
полужирный -
Зажигалка
Доступные числовые значения:
-
100 -
200 -
300 -
400 -
500 -
600 -
700 -
800 -
900
Значение ключевого слова normal сопоставляется с числовым значением 400 , а значение bold сопоставляется с 700 .
Чтобы увидеть какой-либо эффект при использовании значений, отличных от 400 или 700 , используемый шрифт должен иметь встроенные начертания, соответствующие этим указанным весам.
Если шрифт имеет жирную («700») или обычную («400») версию как часть семейства шрифтов, браузер будет использовать это. Если они недоступны, браузер будет имитировать собственную жирную или обычную версию шрифта. Он не будет имитировать другие недоступные веса. Шрифты часто используют такие имена, как «Обычный» и «Легкий» для обозначения любых альтернативных весов шрифта.
Следующая демонстрация демонстрирует использование альтернативных значений веса:
В приведенной выше демонстрации используется бесплатный шрифт Open Sans, встроенный с помощью Google Web Fonts API. В шрифт загружаются все доступные веса шрифта, поэтому с помощью свойства font-weight отображаются различные доступные веса, как описано в тексте каждого абзаца. Недоступные веса просто отображают логически ближайший вес.
Распространенные шрифты, такие как Arial, Helvetica, Georgia и т. Д.не имеют веса, отличного от 400 и 700 . Таким образом, в той же демонстрации, отображаемой с одним из этих шрифтов, будет отображаться только два веса в девяти абзацах.
Использование ключевых слов «жирнее» и «светлее»
Ключевые слова полужирный и светлее относятся к вычисленному весу шрифта родительского элемента. Браузер будет искать ближайший «смелее» или «светлее
Вес шрифта — Tailwind CSS
Попутный ветер CSS Попутный ветер CSS v1.6,0 v0.7.4 GitHub щебет диссонанс v1.6.0 v0.7.4 Документация Составные части Screencasts Блог Ресурсы сообществоНачало работы
- Монтаж
- Примечания к выпуску
- Руководство по обновлению
- Использование с препроцессорами