Как в css шрифт сделать жирным: Как сделать жирный шрифт в css

Шрифт 

Содержание

Создание жирного и курсивного шрифта средствами CSS

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

Курсивный шрифт CSS

Оформлять текст курсивом помогает свойство font-style: ;, которому прописывается значение italic, что обозначает «Стиль шрифта — курсивный».

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

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML страница</title>
     <link  href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>

Первый абзац Первый абзац Первый абзац Первый абзац

Второй абзац Второй абзац Второй абзац Второй абзац

Третий абзац Третий абзац Третий абзац Третий абзац

 
Четвертый абзац Четвертый абзац Четвертый абзац

Пятый абзац Пятый абзац Пятый абзац Пятый абзац
</body>
</html>

Задаем свойство для курсивного шрифта.

CSS

.italic{
    font-style: italic;
}

Если Вы создали такие абзацы и задали для них свойство, то у второго абзаца текст стал курсивным. Это мы задали свойство для всего абзаца, а теперь давайте усложним и зададим курсив только для двух слов в четвертом абзаце. Как такое сделать? В HTML уроке мы разбирали тег логического уровня <span>. Данный тег как раз используется для таких ситуаций, когда для какой-то части элемента нужно задать какой-то класс. И так в четвертый абзац встраиваем тег

<span> </span> и ему прописываем класс <span class=«italic»></span>. В результате получаем вот такую запись:

HTML


Первый абзац Первый абзац Первый абзац Первый абзац

Второй абзац Второй абзац Второй абзац Второй абзац

Третий абзац Третий абзац Третий абзац Третий абзац

Четвертый абзац Четвертый абзац Четвертый абзац

Пятый абзац Пятый абзац Пятый абзац Пятый абзац

CSS

.italic{
    font-style: italic;
}

Теперь второй абзац и часть четвертого абзаца отображаются курсивом. В

демо это наглядно показано.

Жирный шрифт CSS

Чтобы задать жирный шрифт используется другое свойство, с именем font-weight: ; другими словами его еще называют насыщенностью шрифта. Изначально насыщенность установлена в значение normal то есть насыщенность шрифта нормальная, а задав значение bold он примет полужирный вид.

CSS

.bold{
    font-weight:bold ;
}

Так же можно задавать значение насыщенности цифрами от 100

до 900 с шагом 100. Значение normal приравнивается цифре 400, а значение bold цифре 700. Значение 900 поддерживается не всеми шрифтами, поэтому задав это значение, Вы можете не заметить отличия от значения 700. Выглядит такое условие следующим образом.

CSS

.bold{
    font-weight:700 ;
}

В html коде поступают точно также: если нужно выделить весь абзац то задаем ему новый класс, если часть текста, то используем тег

<span class=«italic»></span>. Рассмотрим маленький пример:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML страница</title>
     <link  href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>

Первый абзац Первый абзац Первый абзац Первый абзац

Второй абзац Второй абзац Второй абзац Второй абзац

 
Третий абзац Третий абзац Третий абзац Третий абзац

Четвертый абзац Четвертый абзац Четвертый абзац

Пятый абзац Пятый абзац Пятый абзац Пятый абзац
</body>
</html>

CSS

.bold{
    font-weight: bold;
}

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

  • Курсивный шрифт задается: font-style:italic;.
  • Жирный шрифт задается:
    font-weight:bold;    .
  • Для возврата шрифту нормальной насыщенности устанавливается значение: font-weight:normal; или значение font-weight:400;, что в данном случае означает одно и тоже.

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

<<< Предыдущий материал

Следующий материал >>>


Просмотреть демо: Демо

Скачать исходник: Скачать

Свойство font-weight CSS устанавливает (или жирность)свойства font-weight задается с помощью любого из перечисленных ниже значений.

Свойство CSS font-weight устанавливает насыщенность (или жирность) шрифта. Доступные веса зависят от текущего установленного font-family .

Try it

Syntax

/ * Значения ключевых слов * /
font-weight: normal;
font-weight: bold;
/ * Значения ключевого слова относительно родительского * /
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;
/ * Глобальные значения * /
font-weight: inherit;
font-weight: initial;
font-weight: revert;
font-weight: revert-layer;
font-weight: unset;

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

Values

normal

Нормальный вес шрифта. Так же, как 400 .

bold

Вес жирного шрифта. Так же, как 700 .

lighter

На один относительный вес шрифта легче, чем у родительского элемента. Обратите внимание, что для расчета относительного веса учитываются только четыре веса шрифта; см. раздел « Значение относительных весов » ниже.

bolder

На один относительный вес шрифта тяжелее родительского элемента. Обратите внимание, что для расчета относительного веса учитываются только четыре веса шрифта; см. раздел « Значение относительных весов » ниже.

<number>

Значение <number> от 1 до 1000 включительно. Более высокие числа обозначают веса, которые жирнее (или полужирнее), чем более низкие числа. Некоторые часто используемые значения соответствуют общим именам весов, как описано в разделе « Сопоставление общих имен весов » ниже.

В более ранних версиях спецификации font-weight свойство принимает только значения ключевых слов и числовые значения 100, 200, 300, 400, 500, 600, 700, 800 и 900; неизменяемые шрифты действительно могут использовать только эти установленные значения, хотя мелкие значения (например, 451) будут преобразованы в одно из этих значений для неизменяемых шрифтов с использованием системы весов Fallback .

CSS Fonts Level 4 расширяет синтаксис, чтобы принимать любое число от 1 до 1000, и вводит переменные шрифты , которые могут использовать этот гораздо более мелкий диапазон значений веса шрифта.

Fallback weights

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

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

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

Если указано lighter или bolder , на приведенной ниже диаграмме показано, как определяется абсолютный вес шрифта элемента.

Обратите внимание,что при использовании относительных весов учитываются только четыре веса шрифта-тонкий (100),нормальный (400),полужирный (700)и тяжелый (900).Если у семейства шрифтов имеется больше весов,они игнорируются для целей расчета относительного веса.

Inherited valuebolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700

Картирование имен с общим весом

Числовые значения от 100 до 900 примерно соответствуют следующим общепринятым названиям весов (см. спецификацию OpenType ):

ValueОбщий вес имя
100Thin (Hairline)
200Дополнительный свет (Ультра свет)
300Light
400Normal (Regular)
500Medium
600Полусмелый (Деми Болд)
700Bold
800Экстра Смелый (Ультра Смелый)
900Black (Heavy)
950Экстра черный (ультра черный)

Variable fonts

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

Для шрифтов переменной TrueType или OpenType вариант «wght» используется для реализации различной ширины.

Примечание. Чтобы приведенный ниже пример работал, вам понадобится браузер, поддерживающий синтаксис CSS Fonts Level 4, в котором font-weight может быть любым числом от 1 до 1000 . Демо загружается с font-weight: 500; . Измените значение, чтобы увидеть изменение веса текста.

Accessibility concerns

Люди с ослабленным зрением могут испытывать трудности с чтением текста, для которого установлено значение font-weight 100 (Тонкий / Тонкий) или 200 (Очень светлый), особенно если шрифт имеет низкую контрастность цвета .

  • MDN Понимание СППН,Руководящий принцип 1.4 пояснения
  • Понимание Критерий успеха 1.4.8 | W3C Понимание ВКПГ 2.0

Formal definition

Initial valuenormal
Applies toвсе элементы. Это также относится к ::first-letter и ::first-line .
Inheritedyes
Computed valueключевое слово или числовое значение, как указано, с bolder и lighter преобразованным в реальное значение
Animation typeвес шрифта

Formal syntax

font-weight =   <font-weight-absolute>  |  bolder                  |  lighter                 <font-weight-absolute> =   normal             |  bold               |  <number [1,1000]>

Examples

Настройка веса шрифта

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 heavy<br/>
  <span>I'm lighter</span>
</div>
CSS
/ * Сделать текст абзаца полужирным.  * /
p {
  font-weight: bold;
}
/ * Устанавливаем текст div на два шага тяжелее обычного, но меньше стандартного полужирного шрифта. * /
div {
  font-weight: 600;
}
/ * Устанавливаем текст диапазона на один шаг легче, чем его родительский. * /
span {
  font-weight: lighter;
}
Result

Specifications

Specification
Модуль шрифтов CSS, уровень 4
# font-weight-prop

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox для AndroidOpera AndroidSafari на IOSSamsung Internet
font-weight

2

12

1

3

3.5

1

4. 4

18

4

10.1

1

1.0

number

62

17

61

No

49

11

62

62

61

46

11

8.0

See Also

  • font-family
  • font-style
  • Фундаментальный стиль текста и шрифта

CSS

  • font-variant-position

    CSS-свойство font-variant-position управляет использованием альтернативных глифов меньшего размера,которые позиционируются как надстрочные или подстрочные.

  • font-variation-settings

    Свойство font-variation-settings CSS обеспечивает низкоуровневый контроль над характеристиками переменных,указывая четырехбуквенные имена осей,которые вы хотите

  • forced-color-adjust

    CSS-свойство forced-color-adjust позволяет авторам исключить определенные элементы из режима цветов.

  • <frequency>

    Тип данных CSS <частота> представляет измерение, например высоту голоса.

  • 1
  • …
  • 522
  • 523
  • 524
  • 525
  • 526
  • …
  • 857
  • Next

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

  • Категория сообщения: