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

15.07.2023 Facebook Twitter LinkedIn Google+ Разное

Размер текста в CSS, жирный текст CSS

Главная > Учебник CSS >

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

Стиль, вариант, ширина и размер текста

Для установки размера текста используется свойство font-size. Размер указывается в любых доступных в CSS единицах. Также этому свойству можно установить значения с помощью специальных слов. Таких значений достаточно много, вы можете найти их в справочниках. Использовать их неудобно, обычных единиц измерения CSS вполне достаточно. Для примера создадим абзац и установим для него размер текста:

Стиль:

+

7
8
9
10

#fo
  {
  font-size: 30px;
  }

HTML код:

14

<p>Текст</p>

Стиль шрифта позваляет выделить текст курсивом. Для установки стиля шрифта используется свойство font-style. Оно может принимать следующие значения:

font-style: normal — обычный шрифт (по умолчанию)

font-style: italic — курсивный шрифт

font-style: oblique — наклонный шрифт

font-style: inherit — значение принимается от родительского элемента

У одних шрифтов стиль italic и oblique выглядит одинаково, у других шрифтов по-разному.

Установим созданному абзацу стиль шрифта. Для этого добавим селектору #fo свойство font-style:

10

font-style: italic;

Есть вариант отображения текста, при котором прописные буквы выглядят как заглавные, только уменьшенного размера. Для этого используется свойство font-variant. Оно принимает следующие значения:

font-variant: normal — нормальный шрифт (по умолчанию)

font-variant: small-caps — прописные буквы выглядят как заглавные

font-variant: inherit — значение принимается от родительского элемента

Добавим селектору #fo свойство font-variant:

11

font-variant: small-caps;

Если увеличить ширину шрифта, то можно сделать жирный текст. В CSS Это делается с помощью свойства font-weight. Оно принимает такие значения:

font-weight: normal — обычный текст

font-weight: bold — жирный текст

font-weight: inherit — принимает значение от родительского элемента

Кроме того, ширину шрифта можно указать с помощью чисел от 100 до 900. Число 400 соответствует значению normal, а число 700 значению bold. Но числа работают не со всеми шрифтами и не во всех браузерах. Поэтому они редко используются.

Добавим селектору #fo свойство font-weight:

12

font-weight: bold;

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

  • стиль
  • вариант
  • ширина
  • размер
  • шрифт

Добавим на страницу тэг <span> и установим для него свойство font:

Стиль:

14
15
16
17

#s1
  {
  font: italic small-caps bold 30px Arial;
  }

HTML код:

22

<span>Текст</span>

Если какое-то из свойств не указано, то используется значение по умолчанию. Но размер и шрифт нужно указывать обязательно. При указании шрифта, так же, как и для свойства font-family, можно перечислить несколько шрифтов через запятую. Добавим на страницу ещё один тег <span> и установим ему свойство font, но по-другому:

Стиль:

18
19

20
21

#s2
  {
  font: 20px Tahoma, Verdana, sans-serif;
  }

HTML код:

27

<span>Текст</span>

Цвет текста

Цвет текста устанавливается с помощью свойства color. Значением этого свойства является цвет, указанный одним из способов, предусмотренных в CSS.

Установим цвет тэгу <span>, который мы создавали ранее. Добавим селектору #s2 свойство color:

21

color: Red;

Высота строки

Межстрочный интервал — это расстояние между строками текста. Для его установки используется свойство line-height. Оно устанавлявает высоту строки. Высота строки состоит из размера шрифта и межстрочного интервала. Если высота строки равна 50 пикселей, а размер шрифта 30 пикселей, то межстрочный интервал получится 20 пикселей. Если высоту строки установить меньше размера шрифта, то строки будут пересекаться. Свойство line-height может принимать такие значения:

line-height: normal — обычный интервал (по умолчанию)

line-height: число, на которое будет умножен размер шрифта

line-height: высота в единицах измерения, доступных в CSS

line-height: проценты от размера шрифта

line-height: inherit значение принимается от родительского элемента

Для примера создадим большой абзац текста, состоящий из нескольких строк. Установим ему размер шрифта и высоту строки:

Стиль:

7
8
9
10
11

#text
  {
  font-size: 20px;
  line-height: 30px;
  }

HTML код:

34
35
36
37
38
39

<p>Текст из нескольких строк Текст из нескольких строк
Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк
Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк
Текст из нескольких строк Текст из нескольких строк Текст из нескольких строк
Текст из нескольких строк
</p>

Попробуйте разные варианты высоты строки. Посмотрите как будет выглядеть текст.

Отступ первой строки

В абзацах часто делается отступ первой строки. В русском языке он называется Красная строка. Для установки этого отступа есть свойство text-indent. Значение указывают в единицах измерения CSS.

Установим отступ большому абзацу. Селектору #text добавим свойство text-indent:

11

text-indent: 50px;

Выравнивание текста

Выравнивание текста устанавливается с помощью свойства text-align. Оно принимает следующие значения:

text-align: left — по левому краю (по умолчанию)

text-align: right — по правому краю

text-align: center — по центру

text-align: justify — по ширине. Используется для текстов длинной более одной строки.

Учитывайте, что выравнивается не сам элемент. Он остаётся на прежнем месте. Выравнивается текст внутри элемента.

Добавим на страницу абзац и выравнем текст в нём по центру.

40

<p>Выравнивание по центру</p>

Декорирование текста

Декорирование — это оформление текста определённым образом. Оно устанавливается с помощью свойства text-decoration. Оно принимает такие значения:

text-decoration: none — без декорирования

text-decoration: underline — подчёркнутый текст

text-decoration: overline — надчёркнутый текст

text-decoration: line-through — зачёркнутый текст

text-decoration: inherit — значение принимается от родительского элемента

Для примера создадим абзац с подчёркнутым текстом:

41

<p>Подчёркнутый текст</p>

Толщина шрифта — Tailwind CSS

​Основы использования

​Установка толщины шрифта

Управляйте толщиной шрифта элемента с помощью утилит font-{weight}.

font-light

Быстрая коричневая лиса прыгает через ленивую собаку.

font-normal

Быстрая коричневая лиса прыгает через ленивую собаку.

font-medium

Быстрая коричневая лиса прыгает через ленивую собаку.

font-semibold

Быстрая коричневая лиса прыгает через ленивую собаку.

font-bold

Быстрая коричневая лиса прыгает через ленивую собаку.

<p>Быстрая коричневая лиса ...</p>
<p>Быстрая коричневая лиса ...</p>
<p>Быстрая коричневая лиса ...</p>
<p>Быстрая коричневая лиса ...</p>
<p>Быстрая коричневая лиса ...</p>

​Применяя условно

​Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:font-bold, чтобы применять утилиту font-bold только при hover.

<p>
  <!-- ... -->
</p>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

​Контрольные точки и медиа-запросы

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

md:font-bold, чтобы применить утилиту font-bold только на экранах среднего размера и выше.

<p>
  <!-- ... -->
</p>

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

​Использование пользовательских значений

​Настройка вашей темы

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

tailwind.config.js

module.exports = {
  theme: {
    fontWeight: {
      thin: '100',
      hairline: '100',
      extralight: '200',
      light: '300',
      normal: '400',
      medium: '500',
      semibold: '600',
      bold: '700',
      extrabold: '800',
      'extra-bold': '800',
      black: '900',
    }
  }
}

Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

​Произвольные значения

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

<p>
  <!-- ... -->
</p>

Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.

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

html

11 месяцев назад

Аднан Шаббир

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

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

  • Как работает свойство font-weight в CSS
  • Как сделать текст полужирным в CSS

Как свойство font-weight работает в CSS

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

Синтаксис

Шрифт: значение;

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

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

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

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

Пример


     


            Выделение текста жирным шрифтом в CSS
         


                   
         


     

В этом примере мы использовали свойство CSS ‘ font-weight ‘ и установили для него значение ‘ жирный ‘

Вывод

3

2

2

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

Использование числового значения свойства font-weight
У нас есть свойство font-weight с числами, что означает, что мы можем изменить толщину текста, установив его значение от 100 до 900. Принимая во внимание, что значения от 100 до 600 относятся к толщине осветления, а значения от 700 до 900 — к жирности шрифта. В приведенном ниже примере вы получите четкое представление об использовании свойства font-weight с числами.

Пример


     


            Выделение текста жирным шрифтом в CSS
         


                   
         


     

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

Вывод

Этот вывод показывает жирность текста в соответствии с заданной толщиной.

Заключение

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

Об авторе

Аднан Шаббир

Посмотреть все сообщения

Толщина шрифта — Tailwind CSS

Основное использование

​Установка толщины шрифта

Управляйте толщиной шрифта элемента с помощью утилит font-{weight} .

шрифт-свет

Быстрая коричневая лиса прыгает через ленивую собаку.

нормальный шрифт

Быстрая коричневая лиса прыгает через ленивую собаку.

шрифт-средний

Быстрая коричневая лиса прыгает через ленивую собаку.

полужирный шрифт

Быстрая коричневая лиса прыгает через ленивую собаку.

полужирный шрифт

Быстрая коричневая лиса прыгает через ленивую собаку.

 
Быстрая коричневая лиса...


Быстрая коричневая лиса...


Быстрая коричневая лиса...


Быстрая коричневая лиса...


Быстрая коричневая лиса...

​Условное применение

​Наведение, фокус и другие состояния

Tailwind позволяет вам условно применять служебные классы в различных состояниях, используя модификаторы вариантов. Например, используйте hover:font-bold , чтобы применять утилиту font-bold только при наведении.

 <р>

Полный список всех доступных модификаторов состояния см. в документации Hover, Focus и других состояний.

​Точки останова и медиа-запросы

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

 <р>

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

​Использование пользовательских значений

​Настройка темы

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

tailwind.config.js

 module.exports = {
  тема: {
    Вес шрифта: {
      тонкий: «100»,
      линия роста волос: «100»,
      сверхлегкий: «200»,
      свет: «300»,
      нормальный: «400»,
      средний: «500»,
      полужирный: «600»,
      полужирный: «700»,
      экстражирный: «800»,
      «очень жирный»: «800»,
      черный: '900',
    }
  }
}

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

Произвольные значения

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

Comments
Leave Comment