Учебник по работе со шрифтами CSS

В этом уроке мы будем изучать работу со шрифтами в CSS!

Свойство font — это сокращенное свойство, которое может объединять несколько подсвойств в одном объявлении. Например:

font: normal italic small-caps bold 16px/120% "Helvetica", sans-serif;

Это эквивалентно:

font-stretch: normal;
font-style: italic; 
font-variant: small-caps; 
font-weight: bold; 
font-size: 16px; 
line-height: 120%; 
font-family: "Helvetica", sans-serif;

Давайте рассмотрим каждое из этих свойств подробнее!

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

Font-family

Свойство font-family задает семейство шрифтов, которое будет использовать элемент.

Выбранный шрифт — это не один шрифт, а одно из «семейств», так как шрифт состоит из нескольких подшрифтов. Таких как полужирный, курсив, светлый и т.д.

body {
    font-family: Helvetica;
}

Название семейства шрифта соответствует либо шрифту, встроенному на странице, либо доступному в системе пользователя.

Можно также выбрать несколько шрифтов, как показано ниже:

body {
    font-family: Helvetica, Arial, sans-serif;
}

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

Типы шрифтов обычно классифицируются как Serif, Sans-Serif или Monospace. Вот некоторые из наиболее популярных:

Serif: Georgia, Times New Roman

Sans-Serif: Arial, Helvetica, Verdana, Lucida Grande, Trebuchet MS

Моноширинный: Courier, Courier New, Lucida Console: Courier, Courier New, Lucida Console

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

Свойство line-height задает объем пространства над и под нашим элементом.

p {
    line-height: 1.5;
}

Мы также можем использовать значения ключевых слов normal, none, а также число, длину (любую допустимую единицу CSS) или процент (размер шрифта элемента, умноженный на %).

Вес шрифта

Свойство font-weight задает ширину (или толщину) каждого из символов шрифта. Вы можете использовать следующие значения:

• normal
• bold
• bolder

Также можно использовать числовые значения:

• 100
• 200
• 300
• 500
• 600
• 800
• 900

100 — самый легкий шрифт, а 900 — самый жирный.

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

Растягивание шрифта

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

Возможны следующие значения:

• ultra-condensed
• extra-condensed
• condensed
• semi-condensed
• normal
• semi-expanded
• expanded
• extra-expanded
• ultra-expanded

Font-style

Свойство font-style принимает одно из трех возможных значений: normal, italic и oblique.

Например, чтобы установить шрифт курсивом:

p {
  font-style: italic;
}

Разница между использованием italic и oblique очень мала. Оба применяют эффект наклона к тексту.

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

Свойство font-size используется для определения размера шрифтов. Например:

p {
  font-size: 20px;
}

Вы используете либо допустимое значение длины (например, px, em, rem в процентах и т.д.), либо предопределенное ключевое слово value.

Доступны следующие значения ключевых слов:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
• smaller
• larger

smaller и larger относительно родительского элемента.

Обратите внимание, что font-size является обязательным значением. При использовании свойства сокращения font размер должен быть задан (иначе он будет недействителен)!

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

Свойство font-variant является некоторым пережитком. Изначально оно использовалось для установки текста мелким шрифтом и имело 3 значения:

• normal
• inherit
• small-caps

Small caps устанавливает текст в режим «small caps», то есть меньше, чем обычные прописные буквы.

Заключение

Если вам понравилась эта статья, следуйте за мной в Twitter, где я ежедневно пишу о вещах, связанных с техникой!
Если вам понравилась эта статья и вы хотите оставить совет — нажмите здесь

🌎 Давайте общаться

• Портфолио

• Twitter

• LinkedIn

• Hashnode

• Devto

• Medium

• Github

• Codepen