Свойства CSS — font-weight

БраузерInternet ExplorerNetтscapeОпераSafariMozilla Firefox
Версия5.56.07.08.08.09.07.08.09.29.51.32.03.11.52.03.0
ПоддерживаетсяДаДаДаДаДаДаДаДаДаДаДаДаДаДаДаДа
CSS (ЦСС)CSS (ЦСС)1
Значение по умолчаниюnormal
НаследуетсяДа
ПрименяетсяКо всем элементам
Аналог ШТМЛ<B>
Ссылка на спецификациюhttp://www. w3.org/TR/CSS21/fonts.ШТМЛ#propdef-font-weight

Описание

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

Синтаксис

font-weight: bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900.

Значения

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

Пример

ШТМЛ 4.01CSS (ЦСС) 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>font-weight</title>
  <style type="text/CSS (ЦСС)">
   h2 {
    font-weight: normal; /* Нормальное начертание */
   } 
   .
 
 select {
    color: maroon; /* Цвет контента */
    font-weight: 600; /* Жирное начертание */
   }
  </style>
 </head>
 <body>
  
  <h2>Duis te feugifacilisi</h2>
  <p><span>Lorem ipsum dolor sit amet</span>, 
  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.</p>
  
 </body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1. Применение атрибута font-weight

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

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

Примечание

Браузер не всегда может адекватно показать требуемую насыщенность шрифта, это зависит от размеров контента и вида шрифта.

Свойство CSS font-weight — разделы Scaler

Обзор

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

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

Синтаксис 

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

Свойство CSS font-weight принимает числовые значения, ключевые слова и глобальные значения. По умолчанию CSS-свойство font-weight имеет нормальное значение

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

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

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

Начертание шрифта в CSS

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

Fallback Weights

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

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

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

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

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

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

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

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

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

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

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

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

Мы не рассматриваем дополнительный вес, связанный с семейством шрифтов.

Дочерние элементы наследуют вычисленные веса шрифта.

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

90940 5 90940 6 0051 90022 900
Унаследованное значение жирнее светлее
100		 90 40022 047
200 400 100
300 400 100
400 700 100
500 700 100
400
700 900 400
800 900 10051 709
900 700

Сопоставление общего веса имени

Значение ключевого слова normal соответствует число 400, тогда как полужирный соответствует числу 700.

Браузер будет имитировать полужирный или обычный шрифт, если эти значения не входят в семейство шрифтов.

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

5 900 51 Сверхлегкий (сверхлегкий) 5 5
Значение Обычный вес Наименование
100 Тонкий (линия роста волос)
300 Легкий
400 Обычный (Обычный)
500 Средний
600 Полужирный
0 7 1200510
800 Очень жирный (Ultra Bold)
900 Черный (плотный)
950 Очень черный (ультра черный) 0106

Вариативные шрифты

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

Например, шрифт 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:

17 Интернет 0052
Браузер Версия
Google Chrome 2.0
Safari 9.0 052
Mozilla Firefox 1.0
Microsoft Edge 12.0
Chrome Android 18
Firefox для Android 4
Opera Android 10. 1
Safari на iOS 1 Opera
1.0
WebView Android 4.4

Заключение

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

Полное руководство по весу шрифтов CSS

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

Вы можете определить вес с помощью доступных ключевых слов или чисел, кратных 100, вплоть до 900. Толщина шрифта увеличивается пропорционально числу.

Синтаксис: font-weight: normal|bold|lighter|bolder|number|initial|inherit|unset;

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

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

для толщины шрифта в CSS

На основе этого синтаксиса значения свойства представляют:

  • Нормальный: Представляет стандартный вес шрифта. Числовой эквивалент обычного ключевого слова — 400.
  • Жирный: значение этого свойства помогает определить полужирный шрифт. Числовой эквивалент этого свойства — 700.
    • .
  • Lighter: значение этого свойства связано с весом шрифта родительского класса. Использование этого ключевого слова сделает толщину шрифта на один уровень светлее, чем шрифт в родительском классе.
  • Жирнее: Как и значение свойства «светлее», еще более жирный шрифт связан с размером шрифта родительского класса. Однако это ключевое слово увеличит вес шрифта на один уровень, а не сделает шрифт светлее.
  • Число: вместо того, чтобы записывать ключевое слово «число» в качестве значения свойства, вам нужно написать числа 100, 200, …, 900. Если вес для указанного числа недоступен для данного семейства шрифтов, применяется предпочтительный номер .

Глобальные значения толщины шрифта в CSS

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

  • Исходное: Исходное ключевое слово сбросит толщину шрифта до значения по умолчанию.
  • Наследовать: это глобальное значение сбросит толщину шрифта до значения, унаследованного от родительского класса элемента.
  • Unset: Это вернет значение к весу шрифта, унаследованному от родительского класса, если он доступен. Если вес не унаследован от родительского класса, он сбрасывает его до исходного значения по умолчанию.

Общие относительные веса шрифта для более светлых и жирных значений

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

Унаследованное значение

Смелее

Зажигалка

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, 400, 700 и 900, независимо от семейства шрифтов.

Сопоставление имени общего веса шрифта

Все числовые значения от 100 до 1000 соответствуют общепринятым названиям гирь, как указано в таблице ниже. Но использование имен, отличных от обычных и полужирных, в CSS не допускается.

Значение

Сопоставленное имя

100

Тонкий

200

Сверхлегкий

300

Легкий

400

Обычный

500

Средний

600

полужирный

700

Жирный

800

Особо жирный

900

Черный

950

Экстра черный

Теперь, когда мы знаем все возможные значения свойства font-weight в CSS, давайте используем их в примере.

Пример использования веса шрифта в CSS

В этом примере мы будем использовать все стандартные значения свойств.

  <заголовок>

    Центральный пример

  

  <тело>

    

Обычный шрифт

    

Жирный шрифт

    

Светлее шрифт

    

Более жирный шрифт

    

Вес 100

    

Вес 200

    

вес 300

    

вес 400

    

вес 500

    

вес 600

    

вес 700

    

вес 800

    

вес 900

  

Выход:

Браузеры, поддерживающие свойство CSS Font-Weight

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

Имя браузера

Версия

Гугл Хром

2,0 ​​

Сафари

1,0

Мозилла Фаерфокс

1,0

Microsoft Edge

12,0

Опера

3,5

Продвигайтесь по карьерной лестнице в качестве разработчика стека MEAN с помощью программы Full Stack Web Developer — MEAN Stack Master’s Program. Зарегистрируйтесь сейчас!

Заключение

Несколько свойств CSS объединяются для оформления веб-страницы, например, веса шрифта (полужирный, очень жирный, светлый, очень светлый или цифры). Вы можете узнать об этих свойствах, обратившись к учебнику Simplilearn по CSS для начинающих или к учебнику по расширенному CSS. Эти учебные пособия охватывают основы CSS, которые окажутся ступенькой к тому, чтобы стать отличным разработчиком внешнего интерфейса.

CSS — это язык стилей, который помогает стилизовать веб-страницу, но сначала вам нужно создать страницу. Узнайте, как это сделать и как CSS сочетается с другими интерфейсными языками программирования, записавшись в нашу программу последипломного образования в Full Stack Web Development. Вы также можете пройти наш 90-дневный бесплатный курс Front-End Web Development. Эти курсы разработаны, чтобы помочь вам приобрести практические знания и практическую практику для глубокого понимания концепций, тем самым предоставив вам инструменты для обеспечения лучших возможностей трудоустройства.

No related posts.