Css font bold: HTML DOM Style fontWeight Property

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

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

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

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

Пример

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

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

 
 <ссылка
  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 и значения ключевых слов, такие как обычный, жирный, светлый и жирный.
• Чтобы сделать наш шрифт жирным, мы можем использовать более высокие числовые значения и ключевые слова, такие как жирный и жирный.
• Если требуемый вес шрифта недоступен, мы можем использовать резервные веса.
• Более жирные и светлые ключевые слова представляют относительный вес.
• Вариативный шрифт — это один шрифт, который действует как множество.

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

Font-Weight: жирный шрифт в CSS не работает

Как бы вы ни старались, вы просто не можете выделить этот текст жирным шрифтом? Хорошо, что ты заглянул сюда; у нас есть советы для вас.

Опубликовано 16 августа 2022 г. Автор Dim NikovВ категории CSS

Ситуация следующая: вы пытаетесь выделить часть текста на веб-странице полужирным шрифтом с помощью CSS. Но даже если ваше правило CSS написано правильно, свойство font-weight: bold просто не работает.

Я сталкивался с этой проблемой больше раз, чем могу сосчитать. И я написал это руководство, чтобы помочь вам и другим, подобным вам, не тратить часы на борьбу с этим.

Чтобы узнать, как заставить font-weight: bold работать, читайте ниже.

Почему ваше правило CSS не работает

Если ваше правило CSS для выделения текста в определенном элементе DOM полужирным отформатировано правильно, но по-прежнему не работает, возможно, оно переопределено другим правилом в одной из таблиц стилей HTML-документа. .

Мы подробно писали об этом в статье под названием «Как предотвратить переопределение CSS». Чтобы узнать подробности, прочтите этот пост, а затем вернитесь сюда и продолжите чтение. Короткую версию и быстрое исправление читайте ниже.

Итак, почему ваше правило CSS не работает?

Потому что свойство font-weight текста в рассматриваемом элементе DOM нацелено на другое правило CSS, которое переопределяет ваше.

Как правило, когда несколько правил CSS нацелены на одно и то же свойство одного и того же элемента DOM, то правило с наиболее конкретным селектором переопределяет другие.

 
<тело>
    
Жирный шрифт

 

Мы можем ориентироваться на  font-weight  свойство 

элемента в этом HTML-документе с несколькими правилами CSS, каждое из которых переопределяет другое.

Вот как это работает:

 p { вес шрифта: полужирный; }
body p { вес шрифта: нормальный; }
p.bold { вес шрифта: полужирный; }
p#bold-1 {начертание шрифта: нормальное; }
/* Правила с ключевым словом !important переопределяют все остальные */
p { вес шрифта: полужирный! важно; } 

В CSS это называется  специфичность . По сути, правило CSS с наиболее конкретным селектором всегда преобладает над всеми остальными.

Как заставить это работать

Есть два способа заставить вес шрифта: полужирный  работать для рассматриваемого элемента DOM (или элементов DOM).

Во-первых, нужно переписать селектор вашего правила CSS, чтобы он был более конкретным, чем селекторы любых других правил CSS, нацеленных на рассматриваемый элемент DOM. (При этом полезно открыть инспектор в инструментах разработчика вашего браузера и просмотреть эти селекторы.)

Второй — добавить ключевое слово !0506 font-weight: полужирное свойство в вашем правиле CSS.

Итак, если прямо сейчас ваше правило CSS выглядит так:

 p { font-weight: bold; } 

Попробуйте сделать так, чтобы это выглядело так, и посмотрите, решит ли это вашу проблему:

 p { font-weight: bold !important; } 

Если вы пытаетесь переопределить правило CSS, встроенное в атрибут  style=""  элемента DOM, этот метод будет единственным, который будет работать.

В заключение

Помните: Когда вес шрифта: полужирный не работает, ваше правило CSS, скорее всего, переопределяется другим правилом CSS с более конкретным селектором.

Перепишите правило CSS с более конкретным селектором или добавьте ключевое слово !important  в конец объявления свойства, и вы сможете заставить его работать.