Font weight css что это: font-weight | WebReference

Например, шрифт Roboto-flex поддерживает широкий диапазон значений толщины шрифта от 1 до 1000.

Сравнение стандартных и числовых значений толщины шрифта

Существуют различные способы отображения толщины шрифта, помимо традиционного полужирного значения. Мы можем использовать числовые значения от 1 до 1000 включительно. Числовые значения позволяют нам более эффективно контролировать интенсивность смелости. Мы можем играть с различными значениями. По мере увеличения числа толщина шрифта увеличивается. Стандартные значения ключевых слов, обычные и полужирные, соответствуют 400 и 700 числовым значениям соответственно.

Давайте рассмотрим пример, чтобы понять вес шрифта:

Пример

Установка веса шрифта

Давайте используем шрифт Open Sans, чтобы понять стандартные значения веса шрифта. HTML

 
 <ссылка
  href="//fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300"
  отн = "таблица стилей"
  тип = "текст/CSS"
/>
Меньший вес шрифта
Нормальный вес шрифта
Толщина полужирного шрифта
Более жирный шрифт
Шрифт: 100
Шрифт: 200
Шрифт: 300
Шрифт: 400
Шрифт: 500
Шрифт: 600
Шрифт: 700
Шрифт: 800
Шрифт: 900
 

УСБ

 
 р{
  размер шрифта: 20 пикселей;
   семейство шрифтов: 'Open Sans';
}
.p1{
  вес шрифта: светлее;
}
.p2{
  вес шрифта: нормальный;
}
.p3{
  вес шрифта: полужирный;
}
.p4{
  вес шрифта:жирнее;
}
.p5{
  вес шрифта: 100;
}
.p6{
  вес шрифта: 200;
}
.p7{
  вес шрифта: 300;
}
. p8{
  вес шрифта: 400;
}
.p9{
  вес шрифта: 500;
}
.p10{
  вес шрифта: 600;
}
.p11{
  вес шрифта: 700;
}
.p12{
  вес шрифта: 800;
}
.p13{
  вес шрифта: 900;
}
 

Выход

Чтобы увидеть вывод в реальном времени, перейдите по следующей ссылке.

Вопросы доступности

Текст со значением веса шрифта 100 (тонкий/тонкий) или 200 (сверхлегкий) может быть труден для чтения людям с ограниченным зрением, особенно если шрифт имеет низкий коэффициент контрастности цвета. Когда вес шрифта уменьшается, а текст становится тоньше, мы начинаем терять детали шрифта. Весь текст должен иметь коэффициент контрастности не менее 4,5:1, за исключением крупномасштабного текста, который должен иметь коэффициент контрастности не менее 3:1.

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

Следующие браузеры поддерживают CSS-свойство font-weight:

Browser	Version
Google Chrome	2. 0
Safari	1.0
Mozilla Firefox	1.0
Microsoft Edge	12.0
Chrome Android	18
Firefox for Android	4
Opera Android	10.1
Safari on iOS	1
OperaSamsung Internet	1.0
WebView Android	4.4

Заключение

• Используя CSS-свойство font-weight, мы можем сделать наш текст жирнее или светлее, чтобы подчеркнуть его значимость.
• Это свойство принимает числовые значения от 1 до 1000 и значения ключевых слов, такие как обычный, жирный, светлый и жирный.
• Чтобы сделать наш шрифт жирным, мы можем использовать более высокие числовые значения и ключевые слова, такие как жирный и жирный.
• Если требуемый вес шрифта недоступен, мы можем использовать резервные веса.
• Более жирные и светлые ключевые слова представляют относительный вес.
• Вариативный шрифт — это один шрифт, который действует как множество.

• стиль шрифта
• семейство шрифтов
• шрифт-растяжка
• размер шрифта

Что такое толщина шрифта в CSS?

Свойство CSS font-weight определяет, насколько жирным или светлым будет отображаться наш текст. Он устанавливает жирность нашего шрифта в зависимости от доступного семейства шрифтов и весов, определенных браузером. Мы можем захотеть выделить некоторые части текста в дизайне. Используя свойство font-weight, мы можем сделать наш текст сильнее или светлее, чтобы подчеркнуть его значимость.

Синтаксис

 
 вес шрифта: ключевое слово|число|глобальные значения;
 

Свойство CSS font-weight принимает числовые значения, ключевые слова и глобальные значения. По умолчанию вес шрифта имеет нормальное значение . Мы даже можем изменить толщину шрифта, чтобы он был жирнее, жирнее или светлее, или указать числовое значение, чтобы указать, насколько жирным или толстым он должен быть. Числовое значение находится в диапазоне от 1 до 1000 включительно. Он принимает глобальные значения, такие как inherit и initial.

Мы можем использовать различные значения для создания толщины шрифта, которая лучше всего подходит для отображения нашего текста, и мы рассмотрим их более подробно позже.

Как сделать текст жирным в CSS?

CSS-свойство font-weight управляет толщиной или весом шрифта. Используя такие значения, как жирный и жирный, мы можем сделать наш шрифт жирным. Мы также можем представить полужирный текст с еще более высокими числовыми значениями.

 
 вес шрифта:жирный|жирный|число
 

Пример, показанный ниже, демонстрирует, как сделать текст полужирным в CSS.

HTML

 
 
Это обычный текст
Это жирный текст. 
Это более жирный текст.
 Это жирный текст, представленный числовым значением .
 

CSS

 
 р{
  размер шрифта: 30px;
}
.pbold{
  вес шрифта: полужирный;
}
.pbolder{
  вес шрифта:жирнее;
}
.pnumericbold{
  вес шрифта: 900;
}
 

Вывод

Чтобы просмотреть это в лучшем виде, нажмите здесь

Давайте рассмотрим поддерживаемые значения ширины шрифта.

Значения свойств

Значение	Описание	Синтаксис
нормальный	Стандартный вес шрифта с числовым значением 400.	вес шрифта;
жирный шрифт	Используется для указания веса полужирного шрифта с числовым значением 700	вес шрифта;
светлее	Уменьшает вес шрифта по сравнению с родительским элементом, принимая во внимание вес шрифта текущего семейства шрифтов.	вес шрифта;
жирнее	Увеличивает вес шрифта по сравнению с родительским элементом, принимая во внимание текущий вес шрифта семейства шрифтов.	вес шрифта ;
числовое значение	Синтаксис CSS 4 поддерживает значение в диапазоне от 1 до 1000 включительно. Веса, которые выделены жирнее (или равны) меньшим значениям, представлены большими числами.	вес шрифта:<число>;
начальный	Используется для установки веса шрифта на значение по умолчанию.	вес шрифта;
наследовать	Используется для наследования свойства от родительского элемента.	вес шрифта;

Fallback Weights

Возможно, точные значения веса шрифта недоступны. Если указанный вес недоступен, запасной вес служит в качестве резервного.

Мы можем использовать следующие правила для определения фактического веса:

1. Если указан целевой вес от 400 до 500 включительно:

   • Мы можем искать возможные веса шрифта между целевым значением и 500 в порядке возрастания.
   • Если совпадений нет, мы можем искать доступные веса ниже желаемого веса в порядке убывания.
   • В противном случае мы перейдем к весам больше 500 в порядке возрастания.

2. Если указанный вес меньше 400 :

   • Мы можем искать веса в порядке убывания меньше требуемого веса.
   • В противном случае мы можем искать веса выше цели в порядке возрастания.

3. Если целевой вес больше 500 :

   • Мы можем искать доступные веса больше целевого в порядке возрастания.
   • В противном случае искать доступные веса меньше целевого в порядке убывания.

Значение относительного веса

Относительный вес представлен более светлыми или жирными значениями. Эти ключевые слова либо увеличивают, либо уменьшают жирность в зависимости от веса шрифта, унаследованного от родительского класса.

При расчете относительной толщины учитываются только следующие четыре веса шрифта:

• 100 — тонкий
• 400 — обычный
• 700 — полужирный
• 900 — тяжелый

• Если семейство шрифтов имеет дополнительные веса, они не учитываются при расчете относительного веса.
• Дочерние элементы наследуют вычисленные веса шрифта.

Если в качестве веса шрифта указано жирнее или светлее, мы можем определить абсолютный вес шрифта с помощью приведенной ниже таблицы.

Common Weight Name Mapping

The keyword value normal corresponds to число 400, тогда как полужирный соответствует числу 700. Браузер будет имитировать свой собственный полужирный или обычный шрифт, если эти значения не включены в семейство шрифтов.

Числовые значения от 100 до 900 соответствуют следующим общепринятым названиям гирь:

Variable Fonts

Вариативный шрифт — это одиночный шрифт, который действует как . Он инкапсулирует все различные значения ширины, веса и другие атрибуты. Большинство шрифтов имеют определенный вес, который соответствует одному из чисел в сопоставлении имени общего веса. Но вариативные шрифты могут вмещать различные начертания с более или менее мелкой детализацией, предоставляя дизайнеру гораздо большую степень контроля над выбранным начертанием.

Например, шрифт Roboto-flex поддерживает широкий диапазон значений толщины шрифта от 1 до 1000.

Использование ключевых слов «жирнее» и «светлее»

Ключевые слова «жирнее» и «светлее» имеют относительный вес, определяемый размером шрифта их родительского элемента . Если семейство шрифтов имеет более одного варианта веса, браузер попытается найти ближайший, прежде чем выбрать «400» или «700», в зависимости от того, что имеет смысл.

Давайте рассмотрим пример, чтобы лучше понять вес шрифта:

Пример

Стандартные значения, поддерживаемые CSS-свойством font-weight, показаны с использованием шрифта Open Sans.

HTML

 
 
Меньший вес шрифта
Нормальный вес шрифта
Толщина полужирного шрифта
Более жирный шрифт
Шрифт: 100
Шрифт: 200
Шрифт: 300
Шрифт: 400
Шрифт: 500
Шрифт: 600
Шрифт: 700
Шрифт: 800
Шрифт: 900
 

УСБ

 
 р{
  размер шрифта: 20 пикселей;
   семейство шрифтов: 'Open Sans';
}
.p1{
  вес шрифта: светлее;
}
.p2{
  вес шрифта: нормальный;
}
.p3{
  вес шрифта: полужирный;
}
.p4{
  вес шрифта:жирнее;
}
.p5{
  вес шрифта: 100;
}
.p6{
  вес шрифта: 200;
}
.p7{
  вес шрифта: 300;
}
.p8{
  вес шрифта: 400;
}
.p9{
  вес шрифта: 500;
}
.p10{
  вес шрифта: 600;
}
.p11{
  вес шрифта: 700;
}
.p12{
  вес шрифта: 800;
}
.p13{
  вес шрифта: 900;
}
 

Вывод

Чтобы просмотреть это в лучшем виде, нажмите здесь

Вопросы доступности

ограниченное зрение для чтения, особенно если шрифт имеет низкий коэффициент контрастности цветов. Когда вес шрифта уменьшается, а текст становится тоньше, мы начинаем терять детали шрифта. Весь текст должен иметь коэффициент контрастности не менее 4,5:1, за исключением крупномасштабного текста, который должен иметь коэффициент контрастности не менее 3:1.

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

Следующие браузеры поддерживают CSS-свойство font-weight:

Browser	Version
Google Chrome	2.0
Safari	1.0
Mozilla Firefox	1.0
Microsoft Edge	12.0
Chrome Android	18
Firefox for Android	4
Opera Android	10.1
Safari on iOS	1
OperaSamsung Internet	1.0
WebView Android	4. Оставить комментарий Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт