Свойства шрифтов в CSS

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

• Свойство font-family используется для изменения лица шрифта.
• Свойство font-style используется для того, чтобы сделать шрифт курсивом или наклонным.
• Свойство font-variant используется для создания эффекта малой величины.
• Свойство font-weight используется для увеличения или уменьшения того, как полужирный или светлый шрифт появляется.
• Свойство font-size используется для увеличения или уменьшения размера шрифта.
• Свойство font используется как сокращенное, чтобы указать ряд других свойств шрифта.

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

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

< html>
   < head>
   < /head>
   < body>
      < p style="font-family:georgia,garamond,serif;">
      Этот текст отображается в georgia, garamond или по
	  умолчанию шрифт засечки в зависимости от того,
	  какой шрифт у вас есть в вашей системе.< /p>
   < /body>
< /html>

Это приведет к следующему результату -

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

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

< html>
   < head>
   < /head>
   < body>
      < p style="font-style:italic;">
      Этот текст будет выделен курсивом< /p>
   < /body>
< /html>

Это приведет к следующему результату -

Задание варианта шрифта

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

< html>
 < head>
   < /head>
   < body>
      < p style="font-variant:small-caps;">
      This text will be rendered as small caps
      < /p>
   < /body>
< /html>

Это приведет к следующему результату -

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

< html>
  < head>
   < /head>
   < body>
      < p style="font-weight:bold;">This font is bold.< /p>
      < p style="font-weight:bolder;">This font is bolder.< /p>
      < p style="font-weight:500;">This font is 500 weight.< /p>
   < /body>
< /html>

Это приведет к следующему результату -

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

В следующем примере показано, как установить размер шрифта элемента. Свойство font-size используется для управления размером шрифтов. Возможные значения могут быть xx-small, x-small, small, medium, large, x-large, xx-large, меньше, больше, размер в пикселях или в процентах.

< html>
   < head>
   < /head>
   < body>
      < p style="font-size:20px;">This font size is 20 pixels< /p>
      < p style="font-size:small;">This font size is small< /p>
      < p style="font-size:large;">This font size is large< /p>
   < /body>
< /html>

Это приведет к следующему результату -

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

< html>
   < head>
   < /head>
   < body>
      < p style="font-size-adjust:0.61;">
         This text is using a font-size-adjust value.
      < /p>
   < /body>
< /html>

Это приведет к следующему результату -

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

В следующем примере показано, как установить растягивание шрифта элемента. Это свойство полагается на компьютер пользователя, чтобы иметь расширенную или сжатую версию используемого шрифта. Возможные значения могут быть normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded.

< html>
   < head>
   < /head>
   < body>
      < p style="font-stretch:ultra-expanded;">
         If this doesn't appear to work, it is likely that your computer doesn't have a 
         condensed or expanded version of the font being used.
      < /p>
   < /body>
< /html>

Это приведет к следующему результату -

Сокращенный вариант записи

Вы можете использовать свойство font, чтобы сразу установить все свойства шрифта. Например,

< html>
   < head>
   < /head>
   < body>
      < p style="font:italic small-caps bold 15px georgia;">
	ПРИМЕНЕНИЕ ВСЕХ СВОЙСТВ ТЕКСТА СРАЗУ.
      < /p>
   < /body>
< /html>

Это приведет к следующему результату -

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!