Справочник по стеку системных шрифтов CSS
Шрифты на веб-сайте могут легко стать значительной частью общего размера пакета, который браузеры должны загрузить, прежде чем смогут отобразить страницу в ее окончательном виде и форме. Кроме того, нам нужно беспокоиться о всевозможных вещах, таких как печально известное свойство font-display.
К этому следует добавить тот факт, что текст, найденный на веб-сайте, почти всегда является самой важной частью, поэтому нам не нужен текст, который выглядит неправильно или трудно читаем. Что должен сделать сообразительный веб-дизайнер, чтобы удовлетворить как производительность, так и внешний вид?
Одним из решений является использование шрифта, который уже установлен на устройстве пользователя. В прошлом это было не очень элегантное решение, потому что некоторые популярные системы не поставлялись с встроенными красивыми шрифтами. Однако сейчас все по-другому, и все основные операционные системы поставляются с системным шрифтом sans serif, который хорошо выглядит и читается.
Таким образом, хитрость заключается в том, чтобы предоставить все эти имена системных шрифтов по умолчанию в качестве значения свойства font-family для элементов, которые должны использовать системный шрифт. Затем браузер будет использовать первый, который он сможет найти в текущей системе. Имейте в виду, что это также будет означать, что текст будет выглядеть по-разному в зависимости от того, на какой системе он читается. Однако это не обязательно плохо, так как текст будет казаться родным для ОС, на которой он читается.
Стек системных шрифтов без засечек
Без лишних слов, вот версия стека системных шрифтов, используемая на этом сайте:
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen-Sans, Ubuntu, Cantarell,
"Helvetica Neue", sans-serif;
}
Этот стек тот же, что используется в WordPress, и до сих пор он работал довольно хорошо для контента с переменным шрифтом для немного большего щегольства, но сам контент использует системный шрифт.
Вот разбивка этих шрифтов/ключевых слов, если вам интересно:
- -apple-system и BlinkMacSystemFont: ключевые слова, используемые для обозначения системного шрифта на устройствах Apple, обычно San Francisco или Helvetica Neue, в зависимости от версии операционной системы. система. В некоторых новых браузерах вместо этих двух ключевых слов теперь можно использовать ключевое слово system-ui.
- Пользовательский интерфейс Segoe: используется в системах Windows.
- Roboto: системный шрифт для устройств Android.
- Oxygen-Sans: системы Linux, использующие KDE.
- Ubuntu: Ubuntu Linux
- Cantarell: системы Linux, использующие Gnome (кроме Ubuntu).
- Helvetica Neue: распространенный резервный шрифт, доступный во многих системах (особенно в системах Apple) на тот случай, если все предыдущие не сработали.
- без засечек: если ничего не помогает, вернитесь к шрифту браузера по умолчанию без засечек. Часто не самый приятный результат, поэтому мы просто не используем
font-family: sans-serif.
Как и в большинстве случаев в жизни, существует множество различных вариантов стека системных шрифтов, и каждый из них немного отличается. Например, вот стек, который использует GitHub.
Стек моноширинных системных шрифтов
Хотя для шрифта с засечками нет стека системных шрифтов, есть стек для моноширинного шрифта, который может быть очень полезен для фрагментов кода и тому подобного. Вот тот, который используется в Bootstrap v4 (при этом GitHub также использует очень похожую версию):
code {
font-family: SFMono-Regular, Menlo, Monaco,
Consolas, "Liberation Mono",
"Courier New", monospace;
}
Системные шрифты с использованием @font-face
Если вам надоело повторять одну и ту же строку из нескольких имен шрифтов в разных местах вашего CSS, в правиле @font-face задокументирован прием, позволяющий определить одно имя, которое относится ко всему стеку.