font-weight

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.

Источник

CSS font-weight Property

The font-weight property sets how thick or thin characters in text should be displayed.

Default value:	normal
Inherited:	yes
Animatable:	yes. Read about animatable Try it
Version:	CSS1
JavaScript syntax:	object.style.fontWeight=»bold» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
normal	Defines normal characters. This is default	Demo ❯
bold	Defines thick characters	Demo ❯
bolder	Defines thicker characters	Demo ❯
lighter	Defines lighter characters	Demo ❯
100 200 300 400 500 600 700 800 900	Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

CSS Bold – How to Bold Text in HTML with Font Weight

Joel Olawanle

CSS is a powerful tool for web developers. It allows you to style and format HTML content in various ways.

One common formatting technique is to make text bold using the font-weight property. Bold text can add emphasis to key information, create visual contrast, and improve the readability of content.

In this article, you will learn how to use CSS to make text bold in HTML using the font-weight property. Whether you’re a beginner or an experienced developer, this article will provide a comprehensive guide to creating bold text in your HTML content using CSS.

Understanding Font-Weight Property

The font-weight property is a CSS property used to define the weight or thickness of a font. It determines the text’s degree of boldness or lightness, with higher values indicating a bolder font-weight.

The font-weight property accepts various values, including numeric and keyword values.

Numeric values range from 100 to 900, with increments of 100. A value of 400 is considered normal, while a 700 is considered bold. Some commonly used keyword values include bold , bolder , lighter , and normal .

How to Create Bold Text with CSS

Creating bold text in HTML using CSS is a straightforward process that can be achieved in several ways. You can choose to use any form of styling, such as inline, internal or external.

How to Create Bold Text with Inline styling

You can use inline styling to apply the font-weight property directly to a specific HTML element, like this:

However, inline styling can make your HTML code cluttered and difficult to maintain, especially when many elements require the same styles.

How to Create Bold Text with Internal styling

Internal styling allows you to apply CSS styles within the head section of an HTML document using the style tag, like this:

This method is useful when applying the same styles to multiple elements on a single page.

How to Create Bold Text with External styling

External styling involves creating a separate CSS file and linking it to your HTML document using the link tag, like this:

The CSS file can contain the styles for all the HTML elements on your website, and you can easily make changes to the styles without modifying the HTML code.

Best Practices for Using Bold Text in HTML

While using bold text in HTML can help emphasize important information, it is essential to follow best practices to ensure the text remains readable and accessible.

Here are some best practices for using bold text in HTML:

Choosing the right font-weight: When using bold text, it is essential to choose the right font-weight to ensure the text is clear and easy to read.

While a heavier font-weight may be suitable for headlines, a lighter weight may be more appropriate for body text. It is also important to ensure that the bold text is not too overwhelming and does not detract from other elements on the page.

Balancing bold text with other formatting options: While bold text can be a powerful way to draw attention to important information, it is important to balance it with other formatting options to create visual hierarchy.

You can use other styles such as italics, underline, or a different font size or color to distinguish different levels of importance.

Avoiding overuse of bold text: Overusing bold text can make the text harder to read and detract from the page’s overall design.

It is important to use bold text sparingly and only where it is necessary to emphasize important information. Avoid using bold text for entire paragraphs or blocks of text, as this can make it difficult for readers to distinguish important information from regular text.

Testing for accessibility: When using bold text, it is essential to ensure it is accessible to all users, including those with visual impairments.

Screen readers can have difficulty reading heavily styled text, so it is important to test the page using accessibility tools to ensure the bold text is properly formatted and accessible.

Conclusion

In conclusion, using bold text in HTML can effectively emphasize important information and create visual hierarchy.

By choosing the right font-weight, balancing bold text with other formatting options, avoiding overuse, and testing for accessibility, you can ensure that the bold text remains readable and accessible to all users.

Thanks for reading and have fun coding!

Embark on a journey of learning! Browse 200+ expert articles on web development. Check out my blog for more captivating content from me.

Источник

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 . На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.

Источник