CSS приемы. Стек системных шрифтов

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

В каждой системе используются свои шрифты. Например:

ОС Версия Системный шрифт
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

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

Итак, каким же образом можно задать свой набор системных шрифтов в CSS?

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

Один из способов применить системные шрифты — это напрямую нацепить их на элемент при помощи свойства font-family.

Chrome и Safari недавно запустили команду "system-ui", которая является представлением базового семейства шрифтов. Ее можно использовать вместо строк "-apple-system" и "BlinkMacSystemFont" в следующем примере.

Известная платформа для разработчиков 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 используют этот же подход с небольшими вариациями, наиболее заметными из которых является использование 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;
}

Следует особо отметить, что данный метод должен использоваться только с CSS свойством font-family и не подходит для свойства font.

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

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

Но есть и альтернативный метод, предложенный Джонатаном Нилом (Jonathan Neal), когда системные шрифты декларируются при помощи директивы @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";
}

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