- font-weight
- Краткая информация
- Синтаксис
- Значения
- Песочница
- Пример
- Мелодический голос персонажа
- Объектная модель
- Спецификация
- Браузеры
- См. также
- An Introduction to HTML/CSS Font Weight
- What is Font Weight?
- Displaying HTML Font Weight
- How to Make Text Bold in CSS
- Standard vs. Numerical Values for Font Weight
- What You Need to Know About Using Numerical Values
- A Matter of Style
- Use Case Scenarios
- Working with Different Browsers
- Outro: (Where to Next?)
- font-weight
- Интерактивный пример
- Синтаксис
- Значения
- Недоступность заданного значения
- Значение относительных весов
- Определение веса имени
- Интерполяция
- Формальный синтаксис
- Примеры
- HTML
- CSS
- Result
- Спецификации
- Совместимость браузеров
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
font-weight
Устанавливает насыщенность шрифта. Значение указывается в виде чисел от 100 до 900 с шагом 100 или с помощью заданных ключевых слов.
Краткая информация
Синтаксис
font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900Синтаксис
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Значения
Насыщенность шрифта задаётся с помощью ключевых слов: bold — жирное начертание и normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.
Вот как числовые значения влияют на насыщенность шрифта.
- 100 — тонкое начертание;
- 200 — сверхсветлое;
- 300 — светлое;
- 400 — нормальное (аналогично normal );
- 500 — среднее;
- 600 — полужирное;
- 700 — жирное (аналогично bold );
- 800 — сверхжирное;
- 900 — тяжёлое.
Учтите, что не все шрифты поддерживают этот набор. Если указанное значение не поддерживается, то браузер приведёт шрифт к ближайшей насыщенности. К примеру, если вы указали 900 и оно не может быть показано, то браузер в действительности применит значение 700 как ближайшее, которое работает корректно.
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900); div < font-family: Roboto, sans-serif; font-weight: >; > Пример
Мелодический голос персонажа
, соприкоснувшись в чем-то со своим главным антагонистом в постструктурной поэтике, иллюстрирует былинный мифопоэтический хронотоп, об этом свидетельствуют краткость и завершенность формы, бессюжетность, своеобразие тематического развертывания.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства font-weight
Объектная модель
Объект.style.fontWeight
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Fonts Module Level 3 | Возможная рекомендация |
| CSS Transitions | Рабочий проект |
| CSS Level 2 (Revision 1) | Рекомендация |
| CSS Level 1 | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
An Introduction to HTML/CSS Font Weight
In this introductory tutorial on HTML/CSS font weight, we will explore some easy to use, creative applications to further enhance the text on your web page.
What is Font Weight?
Font weight is the “value” placed on your font that will determine how bold or light your text will appear. There are many “values” that you can use that provide a great deal of flexibility towards creating the font weight that works best for how you want to display your text.
Displaying HTML Font Weight
If you want to try this yourself, copy the code and paste into a text editor such as Notepad or Notepad++. We will make the font weight “bold.”
How to Make Text Bold in CSS
p color: red;
font-weight: bold;
font: 18px Arial, Helvetica, sans-serif;
>
<p>Udacity is where you can learn about font weightp>
This HTML and CSS code interacting together is explained in the following illustration:
The result on your web page is this. Notice the BOLD text.
Standard vs. Numerical Values for Font Weight
You can always use the traditional “bold” value to bold text, but there are other ways of displaying Font Weight. Using numerical values for instance, allows even greater control over the level of intensity of the Bold text.
What You Need to Know About Using Numerical Values
Although there are in actuality the following numerical values that you can use to define the “boldness” in your displayed text: 100, 200, 300, 400, 500, 600, 700, 800, and 900, the actual result is going to be determined by what font you use in your CSS.
Not every web font, or “font family” was originally built with an array of bold variations. Most font families actually have only a few weights available. What this means is that when a weight is specified for which no face exists, a face with a nearby weight will be used.
The numerical values are as follows:
- 100 – Thin
- 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)
Here are some examples of various font-weight values:
Note: We will be using font-family: Helvetica, Arial, sans-serif; for this demonstration.
| CSS Style | Web Output |
| font-weight: bold; | |
| font-weight: normal; | |
| font-weight: 200;(lighter than normal) | |
| font-weight: 400;(same as “normal”) | |
| font-weight: 700;(same as “bold”) | |
| font-weight: 900;(this is the maximum) |
What you can do with web fonts is endless as you will see as we continue to explore all realms of possibilities. In future blog posts on this subject, we will explore more advanced, cutting-edge areas of font-weight development for the web.
A Matter of Style
Use Case Scenarios
When it comes to style, there will be times when you want to either make your text stand out or make it less noticeable.
Making your font text less dramatic can have a pleasing effect on the eye when you want to showcase words in your web page that hint at almost being subliminal.
p color: gray;
font-weight: 100;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
>
<p>Udacity is where you can learn about font weightp>
The web result of using the numerical font weight of 100 would look like this:
Now if you want to emphasize the point of your message, enhance your font weight with a higher number.
p color: gray;
font-weight: 900;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
>
<p>Udacity is where you can learn about font weightp>
The web result of using the numerical font weight of 900 would look like this:
Working with Different Browsers
In the world of web creation, different browsers can at times yield different results.
Let’s test this out. We will use the following code for the sample:
| Udacity is where you can learn about font weight
|
| Browser Type | Sample Yield |
| Google Chrome | |
| FireFox | |
| Microsoft Edge | |
| Internet Explorer |
As you can see, there are slight variations in how the text displays, but at least for this example, the differences are not significant. With correct use of the CSS Style to enhance the font text, we were able to control the output, helping to assure consistency within four different browsers.
Outro: (Where to Next?)
This introduction to font weight should provide a starting point for further inquiry into the unlimited creative aspects that HTML offers. We will continue to explore other areas of HTML design in the next blog. We hope this introduction has piqued your interest and inspired you to explore further and dive deeper into the world of web design.
font-weight
CSS свойство font-weight устанавливает начертание шрифта. Некоторые шрифты доступны только в нормальном или полужирном начертании.
Интерактивный пример
Синтаксис
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;
Значения
Нормальное начертание. То же, что и 400 .
Полужирное начертание. То же, что и 700 .
Изменяет начертание относительно насыщенности родительского элемента (сверхтонкое начертание).
Изменяет начертание относительно насыщенности родителя элемента (сверхжирное начертание).
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 =
| (en-US)
bolder | (en-US)
lighter
=
normal | (en-US)
bold | (en-US)
Примеры
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
/* Назначение тексту элементажирного начертания. */ p font-weight: bold; > /* Назначение тексту элемента жирности, которая больше на два уровня, чем normal, но все ещё меньше, чем стандартный bold. */ div font-weight: 600; > /* Назначение тексту элемента жирности, которая на один уровень меньше, чем у его родителя. */ span font-weight: lighter; >
Result
Спецификации
| Начальное значение | normal |
|---|---|
| Применяется к | все элементы. Это также применяется к ::first-letter и ::first-line . |
| Наследуется | да |
| Обработка значения | ключевое слово или числовое значение, с bolder и lighter , трансформируемися в действительное значение |
| Animation type | жирность шрифта |
Совместимость браузеров
BCD tables only load in the browser
Found a content problem with this page?
This page was last modified on 10 окт. 2022 г. 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.