Штирлиц — Сеть печатных салонов в Перми

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

Css жирный шрифт bold: font-weight | CSS | WebReference

seodon.ru | CSS справочник — font-weight

Опубликовано: 18.08.2010 Последняя правка: 08.12.2015

Свойство CSS font-weight используется для изменения жирности (веса, насыщенности) шрифта элемента. Поиск подходящего шрифта браузер осуществляет в пределах списка шрифтов заданных свойством font-family. Например для жирного шрифта Arial браузер будет искать в операционной системе пользователя шрифт Arial с пометкой «bold» или какой-то подобной.

Но тут не все так просто. Максимально допустимая шкала жирности шрифтов имеет девять градаций насыщенности, от самой светлой до самой темной. Но не у всех существующих шрифтов есть эти девять градаций, например один шрифт может иметь только две — regular и bold, другой три — regular, medium и bold, а третий вообще только одну. Причем эти пометки не обязательно называются именно так, допустим вместо regular может быть указано book, а вместо bold — black.

Но и это еще не все. Так как шрифты создавались в разное время, разными людьми и без каких-либо жестких стандартов, то у одного шрифта пометка regular может соответствовать его нормальной насыщенности, а bold — увеличенной. У другого, пометка bold — это нормальная жирность, а heavy — повышенная, так как он в принципе создавался, как жирный шрифт и не имеет светлых вариантов.

Поэтому свойство font-weight не определяет какую-то константу жирности одинаковую для всех шрифтов, оно только задает жирность шрифта и ее порядок в пределах данной гарнитуры.

Тип свойства

Назначение: шрифты.

Применяется: ко всем элементам.

Наследуется: да.

Значения

Значением свойства font-weight является указание жирности шрифта одним из следующих способов.

  • Число — число от 100 до 900 с шагом в 100, где 100 — самый светлый, 400 — нормальный шрифт данной гарнитуры, 700 — жирный, а 900 — самый жирный. Если шрифт имеет менее девяти градаций, то браузеры объединяют несколько значений. Например, при font-weight равном 100, 200, 300 или 400 они могут использовать шрифт нормальной жирности, при 500 — повышенной, при 600, 700, 800, 900 — самой высокой.
  • normal — нормальная жирность данной гарнитуры, аналог 400.
  • bold — жирный шрифт, аналог 700.
  • bolder — увеличивает жирность шрифта на 100 относительно наследуемой от родительского элемента. Если в данной гарнитуре такого шрифта нет, то устанавливается ближайший более жирный шрифт, который существует (если существует).
  • lighter — уменьшает жирность шрифта на 100 относительно родительского элемента.
  • inherit — наследует значение font-weight от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: normal.

При использовании font-weight: bolder или lighter необходимо учитывать, что дочерние элементы наследуют не эти значения, а те, которые получились в итоге.

Синтаксис

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

Пример CSS: использование font-weight

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.
  ru - CSS свойство font-weight</title>
  <style type="text/css">
   #div1 {
    font-family: Times, serif; /* шрифт Times */
   }
   #div2 {
   font-weight: bolder; /* увеличение жирности */
   }
  </style>
 </head>
 <body>
  <div>
   Шрифт Times с font-weight: 400.
   <div>
    Times с font-weight: bolder, у него это bold или 700.
    <div>Times с font-weight: bold или 700.</div>
   </div>
  </div>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS font-weight.

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:ДаДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и выше2. 0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ЧастичноДаДаДаДаДа

Internet Explorer 6.0 и 7.0 не понимают значение inherit.

DigiPortfoolio OÜ печать на масках в Нарве

Рассмотрим варианты работы со шрифтами, а так же вопрос отображения уникального шрифта на выбранном на web-сайте.

В уроке используются следующие параметры CSS:

  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-size

Семейство шрифта

Свойство font-family указывает приоритетный список шрифтов, используемых для отображения данного элемента или web-страницы. Если первый шрифт списка не установлен на компьютере, с которого выполняется доступ к сайту, ищется следующий шрифт списка, пока не будет найден подходящий.

Для категоризации шрифтов используются два типа имён: имя семейства/family-name и общее/родовое семейство/generic family. Эти два термина объясняются далее.

Family-name

Пример family-name (часто называемое просто «шрифт») это, например, «Arial», «Times New Roman» или «Tahoma».

Generic family

Его можно проще описать как группу family-names, имеющих характерные общие черты. Пример — sans-serif, набор шрифтов без «засечек/feet».

Разницу можно также проиллюстрировать так:

При указании шрифтов для вашего web-сайта вы, естественно, начинаете с предпочтительного шрифта, а затем перечисляете альтернативные. Рекомендуем в конце списка указывать родовое имя. Тогда страница, как минимум, будет отображена шрифтом того же семейства, если отсутствуют все специфицированные конкретные шрифты.

Список шрифтов может выглядеть так:

h2 {font-family: arial, verdana, sans-serif;}

h3 {font-family: «Times New Roman», serif; }      

Заголовки <h2> будут отображаться шрифтом «Arial». Если он не установлен на пользовательской машине, будет использоваться «Verdana». Если недоступны оба шрифта, для показа заголовков будет использован шрифт семейства sans-serif.

Обратите внимание, что имя шрифта «Times New Roman» содержит пробелы, поэтому указано в двойных кавычках.


Стиль шрифта

Свойство font-style определяет normal (обычный), italic (курсив) или oblique (наклонный). В примере все заголовки <h3> будут показаны курсивом italic.

h2 {font-family: arial, verdana, sans-serif;}

h3 {font-family: «Times New Roman», serif; font-style: italic;} 

Вариант шрифта

Свойство font-variant используется для выбора между вариантами normal и small-caps. Шрифт small-caps использует малые заглавные буквы (upper case) вместо букв нижнего регистра. Непонятно? Смотрите примеры:

Если font-variant имеет значение small-caps, а шрифт small-caps недоступен, браузер, скорее всего, отобразит текст буквами верхнего регистра.

h2 {font-family: arial, verdana, sans-serif;}

h3 {font-family: «Times New Roman», serif; font-style: italic;}

h4 {font-variant: small-caps;}


Вес шрифта

Свойство font-weight описывает, насколько толстым, или «тяжёлым», должен отображаться шрифт. Шрифт может быть normal или bold. Некоторые браузеры поддерживают даже числовые значения 100-900 (в сотнях) для описания веса шрифта.

  • normal — обычный шрифт
  • bold — полужирный шрифт
  • bolder — жирный шрифт
  • lighter — тонкий шрифт

Пример кода:

h2 {font-family: arial, verdana, sans-serif; font-weight: bold;}

Размер шрифта

Размер шрифта устанавливается свойством font-size.

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

значения абсолютного размера шрифта:

  • xx-small — очень очень маленький
  • x-small — очень маленький
  • small — маленький
  • medium — средний
  • large — большой
  • x-large — очень большой
  • xx-large — очень очень большой

значения относительного размера шрифта:

  • larger — больше чем размер шрифта родительского элемента
  • smaller — меньше чем размер шрифта родительского элемента

Примеры:

h2 {font-family: arial, verdana, sans-serif; color: #ff0000;background-color: #fc9804; font-size: 30px;}

h3 {font-size: 12pt; font-family: «Times New Roman», serif; font-style: italic;}

h4 {font-size: 120%; font-variant: small-caps;}

p { font-size: 1em; font-weight: bold; }

Есть одно отличие в указанных единицах измерения: ‘px’ и ‘pt’ дают абсолютное значение размера шрифта, а ‘%’ и ’em’ — относительные. Многие пользователи не могут читать мелкий текст, по разным причинам. Чтобы сделать ваш web-сайт доступным для всех, вы должны использовать относительные значения, такие как ‘%’ или ’em’.

 Задания

Установите парметры шрифта для заголовка h2 — жирный, все буквы большие, цвет красный и размер 25px

Установите парметры шрифта для заголовка h3 — наклонный, цвет черный и размер 2em

Установите парметры шрифта для заголовка h4 — размер 1em


В предыдущем уроке мы рассматривали работу с цветом и фоном страницы

В следующем уроке мы рассмотрим работу с текстом

«полужирный» не является значением «стиля шрифта». · Ракетный валидатор

Rocket Validator интегрирует средство проверки HTML W3C Validator. в автоматизированный поисковый робот.

  • css
  • стиль шрифта
  • смелый
  • вес шрифта

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

Значение жирный не является допустимым значением для стиль шрифта . Вместо этого следует использовать свойство font-weight , чтобы задать жирность шрифта. Допустимые значения для font-weight : normal , жирный , жирнее и светлее .

Вот пример использования свойства font-weight для выделения текста полужирным шрифтом:

 
Этот текст выделен жирным шрифтом.

Кроме того, вы можете использовать таблицу стилей CSS, чтобы применить свойство font-weight к нескольким элементам: