Стек стандартных шрифтов

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

Классификация системных шрифтов:

ОС Версия Системный шрифт
Mac OS X El Capitan San Francisco
Mac OS X Yosemite Helvetica Neue
Mac OS X Mavericks Lucida Grande
Windows Vista Segoe UI
Windows XP Tahoma
Windows 3.1 до ME Microsoft Sans Serif
Android Ice Cream Sandwich (4.0)+ Roboto
Android Cupcake (1.5) до Honeycomb (3.2.6) Droid Sans
Ubuntu Все версии

 

Ubuntu

Переходим к коду

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

Метод 1: Системные шрифты на уровне элемента

Chrome и Safari недавно представили «system-ui» —  универсальное семейство шрифтов, которое может быть использовано вместо «-apple-system» и «BlinkMacSystemFont«. Один из методов применения системных шрифтов — вызвать их напрямую для элемента, используя свойство font-family.

GitHub использует этот метод на своем сайте, применяя системные шрифты в body:

/* Системные шрифты используются GitHub */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

И Medium и WordPress admin используют схожий подход. Больше всего поддерживается Oxygen Sans (создан для операционной системы GNU+Linux) и Cantarell (создан для операционной системы GNOME).

Данный пример также демонстрирует поддержку некоторых типов смайликов и символов:

/* Системные шрифты, как их использует Medium и WordPress */
body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

Примечание: Этот метод можно использовать только для font family CSS стандартных шрифтов вместо более короткого font.

Метод 2: Стеки системных шрифтов

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

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

/* Определить «системное» семейство шрифтов */
@font-face {
font-family: system;
font-style: normal;
font-weight: 300;
src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}

/* Теперь, применим его на элементе */ body { font-family: "system"; }

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

Перевод статьи “System Font Stack” был подготовлен дружной командой проекта Сайтостроение от А до Я.