Основы оптимизации шрифтов в CSS

15 сентября, 2021 11:38 дп 112 views | Комментариев нет

| | Комментировать запись

Шрифты веб-сайта легко могут занять значительную часть общего размера пакета, который браузеры должны загрузить, прежде чем смогут отобразить страницу в ее окончательном виде и форме. Кроме того, веб-дизайнерам нужно беспокоиться о таких как печально известных вещах, как FOUT (Flash of Unstyled Text, или появление неоформленного текста). Однако есть вероятность, что благодаря свойству font-display эта проблем была частично решена.

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

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

Таким образом, уловка заключается в том, чтобы предоставить имена этих системных шрифтов по умолчанию в качестве значения свойства font-family для элемента, который должен использовать системный шрифт. Браузер будет использовать первый шрифт, который он сможет найти в текущей системе. Имейте в виду, что текст будет выглядеть по-разному – в зависимости от того, в какой системе он читается. Однако это не плохо, поскольку при этом текст будет выглядеть естественно в контексте стиля ОС, в которой он был открыт.

Системный стек шрифтов Sans Serif

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Oxygen-Sans, Ubuntu, Cantarell,
               "Helvetica Neue", sans-serif;
}

Этот же стек используется в WordPress и Alligator.io и, судя по всему, неплохо работает. Для большего размаха в заголовках часто используется переменный шрифт, но в самом контенте остается системный шрифт.

Читайте также: Использование переменных шрифтов CSS в сети

К примеру, digitalocean в своем блоге использует следующие шрифты и ключевые слова:

  • -apple-system и BlinkMacSystemFont: ключевые слова для обозначения системного шрифта на устройствах Apple (обычно это San Francisco или Helvetica Neue, в зависимости от версии операционной системы). В некоторых новых браузерах для работы с этими двумя ключевыми словами теперь можно использовать ключевое слово system-ui.
  • Segoe UI: используется в системах Windows.
  • Roboto: системный шрифт для устройств Android.
  • Oxygen-Sans: шрифт для систем Linux, использующих KDE.
  • Ubuntu: шрифт для Ubuntu Linux.
  • Cantarell: системы Linux на Gnome (кроме Ubuntu).
  • Helvetica Neue: общий резервный шрифт, доступный во многих системах (особенно в Apple). Он определяется на случай, если все предыдущие шрифты не получается загрузить.
  • sans-serif: если все предыдущие шрифты не загружаются, страница может вернуться к sans-serif, шрифту браузера по умолчанию. Это не самый приятный вариант, поэтому он используется в последнюю очередь.

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

Стеки моноширинных шрифтов

Хотя для шрифтов с засечками не существует системного стека, такой стек есть для моноширинных шрифтов. Он может быть действительно полезным для оформления фрагментов кода и т.п. Вот шрифт, который использует Bootstrap v4 (а GitHub использует очень похожую версию):

code {
  font-family: SFMono-Regular, Menlo, Monaco,
               Consolas, "Liberation Mono",
               "Courier New", monospace;
}

Системные шрифты и @font-face

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

Читайте также: Определение пользовательских шрифтов в CSS с помощью @font-face и font-display

Tags:

Добавить комментарий