Как изменить толщину шрифта css
Перейти к содержимому

Как изменить толщину шрифта css

  • автор:

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

Спецификации

Specification
CSS Fonts Module Level 4
# font-weight-prop
Начальное значение normal
Применяется к все элементы. Это также применяется к ::first-letter и ::first-line .
Наследуется да
Обработка значения ключевое слово или числовое значение, с bolder и lighter , трансформируемися в действительное значение
Animation type жирность шрифта

Совместимость браузеров

BCD tables only load in the browser

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

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

Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.

Синтаксис

Значения

Насыщенность шрифта задаётся с помощью ключевых слов: bold — полужирное начертание, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.

HTML5 CSS2.1 IE Cr Op Sa Fx

    font-weight   

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.

Применение свойства font-weight

Рис. 1. Применение свойства font-weight

Объектная модель

[window.]document.getElementById(» elementID «).style.fontWeight

Браузеры

Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold , normal и lighter . На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.

font — weight

Свойство font — weight задаёт насыщенность шрифта: от самого тонкого до самого жирного начертания.

Примеры

Скопировать ссылку «Примеры» Скопировано

 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 .

Ещё примеры

Скопировать ссылку «Ещё примеры» Скопировано

Попробуем задать насыщенность сразу разными способами к разным элементам кода:

   

Шрифт этого заголовка — жирный. Мы задали его с помощью ключевого слова bold. В цифровом значении он равен 700 единицам.

Это текст стандартной толщины внутри контейнера

. Он эквивалентен 400 единицам толщины.

Это текст внутри контейнера — и он чуть толще, чем стандартный normal, но тоньше, чем bold. Мы задали его насыщенность с помощью значения 500. В контейнере шрифт тоньше, чем в , внутри которого он находится. Его мы задали с помощью значения lighter.
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;> /* Обычный текст в абзаце 

сделаем стандартным normal */p font-weight: normal;> /* В контейнере текст будет средним по жирности между normal и bold */div font-weight: 500;> /* В элементе текст будет на один уровень меньше по жирности,чем у родительского элемента, внутри которого он находится */span font-weight: lighter;> body font-family: "Roboto", sans-serif; > /* Зададим толщину заголовка с помощью слова bold. */ h1 font-weight: bold; > /* Обычный текст в абзаце

сделаем стандартным normal */ p font-weight: normal; > /* В контейнере текст будет средним по жирности между normal и bold */ div font-weight: 500; > /* В элементе текст будет на один уровень меньше по жирности, чем у родительского элемента, внутри которого он находится */ 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 — weight , которое вы указали в директиве font — face .

Например, у всеми известного шрифта Roboto, нет насыщенности шрифта равной 800, поэтому при выборе данного значения браузер будет показывать 900, как ближайшее корректное значение.

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Большинство современных шрифтов имеет полный набор начертаний. Для более тонкого управления отображением шрифта используются как раз таки цифровые значения для свойства font — weight .

�� Относительные значения bolder и lighter не используются почти никогда. Причина в том, что они относительные. Как итог если меняется вес шрифта родительского элемента — меняется вес шрифта ребёнка. Но это, чаще всего, не то что нужно. Совет: используй всегда абсолютный вес шрифта.

Толщины шрифтов в CSS

Чтобы использовать font-weight важно правильно настроить CSS-маппинг (замаппить название шрифта на толщине).

@font-face< font-family: 'Fira Sans'; src: url('eot/FiraSans-Hair.eot'); src: local('Fira Sans Hair'), url('eot/FiraSans-Hair.eot') format('embedded-opentype'), url('woff/FiraSans-Hair.woff') format('woff'), url('ttf/FiraSans-Hair.ttf') format('truetype'); font-weight: 100; font-style: normal; >

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *