Шрифт CSS: основы и примеры использования

Важность шрифтов в веб-дизайне

Шрифты играют важную роль в веб-дизайне, так как они помогают передать настроение и стиль страницы. Для определения шрифтов на веб-сайте в CSS используется свойство font-face. Оно позволяет загружать и использовать пользовательские шрифты на веб-страницах.

Синтаксис свойства "font-face"

Синтаксис свойства font-face выглядит следующим образом:

@font-face {
  font-family: 'MyCustomFont'; /* название вашего шрифта */
  src: url('fonts/MyCustomFont.ttf') format('truetype'); /* путь к файлу шрифта */
}

Приведенный выше код указывает, что мы хотим использовать пользовательский шрифт с названием "MyCustomFont". Шрифт хранится в каталоге "fonts" под названием "MyCustomFont.ttf". Обратите внимание, что формат шрифта также указывается - в данном случае это TrueType шрифт.

Использование пользовательских шрифтов

После определения пользовательского шрифта, можно его использовать в других правилах CSS или селекторах. Например:

body {
  font-family: 'MyCustomFont', sans-serif;
}

В данном примере мы указываем, что все текстовые элементы <body> должны отображаться с использованием шрифта "MyCustomFont". Если этот шрифт недоступен, будет использоваться альтернативный шрифт из семейства "sans-serif".

Поддержка других форматов шрифтов

Font-face также поддерживает другие форматы шрифтов, такие как WOFF (Web Open Font Format) или WOFF2. Эти форматы обычно являются более компактными и оптимизированными для использования веб-шрифтов. Чтобы использовать эти форматы, укажите соответствующий путь к файлам шрифтов, используя правильные форматы:

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/MyCustomFont.woff2') format('woff2'),
       url('fonts/MyCustomFont.woff') format('woff');
}

В данном примере мы использовали как WOFF2, так и WOFF файлы шрифта. Если браузер поддерживает WOFF2, он будет использовать этот формат, а если нет, то WOFF.

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

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/MyCustomFont.woff2') format('woff2'),
       url('fonts/MyCustomFont.woff') format('woff'),
       url('fonts/MyCustomFont.ttf') format('truetype');
}

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

Заключение

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