CSS шрифты

Узнайте, как работать со шрифтами в CSS

На заре Интернета у вас было только несколько шрифтов, из которых вы могли выбирать.

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

За прошедшие годы CSS приобрел много хороших возможностей в отношении шрифтов.

Вfontсвойство - это сокращение для ряда свойств:

  • font-family
  • font-weight
  • font-stretch
  • font-style
  • font-size

Давайте посмотрим на каждого из них, а затем мы рассмотримfont.

Затем мы поговорим о том, как загружать пользовательские шрифты, используя@importили же@font-face, или загрузив таблицу стилей шрифта.

font-family

Устанавливает шрифтсемьячто элемент будет использовать.

Почему «семья»? Потому что то, что мы знаем как шрифт, на самом деле состоит из нескольких подшрифтов. которые обеспечивают необходимый нам стиль (жирный, курсив, светлый ..).

Вот пример из приложения Font Book для моего Mac - семейство шрифтов Fira Code содержит несколько выделенных шрифтов:

Это свойство позволяет вам выбрать определенный шрифт, например:

body {
  font-family: Helvetica;
}

Вы можете установить несколько значений, поэтому второй вариант будет использоваться, если первый не может быть использован по какой-либо причине (например, если он не найден на машине или сетевое соединение для загрузки шрифта не удалось, например):

body {
  font-family: Helvetica, Arial;
}

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

Мы делим их на шрифты с засечками, без засечек и моноширинные. Вот список самых популярных из них:

Засечки- Грузия - Палатино - Times New Roman - Times

Без засечек- Arial - Helvetica - Verdana - Geneva - Tahoma - Lucida Grande - Impact - Trebuchet MS - Arial Black

Моноширинный- Courier New - Courier - Lucida Console - Монако

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

Вы также можете использовать общие имена:

  • sans-serifшрифт без лигатур
  • serifшрифт с лигатурами
  • monospaceшрифт, особенно подходящий для кода
  • cursiveиспользуется для имитации рукописных произведений
  • fantasyИмя говорит само за себя

Обычно они используются в концеfont-familyопределение, чтобы предоставить запасное значение на случай, если больше ничего нельзя применить:

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

font-weight

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

  • нормальный
  • смелый
  • жирнее (относительно родительского элемента)
  • светлее (относительно родительского элемента)

Или используя числовые ключевые слова

  • 100
  • 200
  • 300
  • 400, сопоставлен сnormal
  • 500
  • 600
  • 700 сопоставлено сbold
  • 800
  • 900

где 100 - самый светлый шрифт, а 900 - самый жирный.

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

font-stretch

Позволяет выбрать узкую или широкую грань шрифта, если таковая имеется.

Это важно: шрифт должен быть снабжен разными начертаниями.

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

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

font-style

Позволяет применить к шрифту курсив:

p {
  font-style: italic;
}

Это свойство также допускает значенияobliqueиnormal. Существует очень небольшая разница между использованиемitalicиoblique. Первый вариант для меня проще, поскольку HTML уже предлагаетiэлемент, что означает курсив.

font-size

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

Вы можете передавать 2 вида значений:

  1. значение длины, напримерpx,em,remи т. д. или в процентах
  2. ключевое слово с предопределенным значением

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

  • xx-маленький
  • x-small
  • маленький
  • средний
  • большой
  • x-большой
  • xx-большой
  • меньше (относительно родительского элемента)
  • больше (относительно родительского элемента)

Использование:

p {
  font-size: 20px;
}

li { font-size: medium; }

font-variant

Это свойство изначально использовалось для изменения текста на маленькие заглавные буквы, и у него было всего 3 допустимых значения:

  • normal
  • inherit
  • small-caps

Маленькие заглавные буквы означают, что текст отображается «меньшими заглавными буквами» рядом с прописными буквами.

font

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

Мы должны установить как минимум 2 свойства,font-sizeиfont-family, остальные необязательны:

body {
  font: 20px Helvetica;
}

Если мы добавим другие свойства, их нужно расположить в правильном порядке.

Это порядок:

font: <font-stretch> <font-style> <font-variant> <font-weight> <font-size> <line-height> <font-family>;

Пример:

body {
  font: italic bold 20px Helvetica;
}

section { font: small-caps bold 20px Helvetica; }

Загрузка пользовательских шрифтов с помощью@font-face

@font-faceпозволяет добавить новое имя семейства шрифтов и сопоставить его с файлом, содержащим шрифт.

Этот шрифт будет загружен браузером и использован на странице, и это фундаментальное изменение типографики в Интернете - теперь мы можем использовать любой шрифт, какой захотим.

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

В нашем файле CSS мы также можем использовать@importчтобы загрузить этот файл CSS.

А@font-faceобъявление содержит несколько свойств, которые мы используем для определения шрифта, в том числеsrc, URI (один или несколько URI) шрифта. Это соответствует политике одного и того же происхождения, что означает, что шрифты могут быть загружены только из текущего источника (домен + порт + протокол).

Шрифты обычно в форматах

  • woff(Формат открытого веб-шрифта)
  • woff2(Формат открытых веб-шрифтов 2.0)
  • eot(Встроенный открытый тип)
  • otf(Шрифт OpenType)
  • ttf(Шрифт TrueType)

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

  • font-family
  • font-weight
  • font-style
  • font-stretch

Примечание о производительности

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

Скачать мою бесплатнуюСправочник CSS


Больше руководств по css: