Установка для сайта шрифтов, которые являются шрифтами по умолчанию для конкретной операционной системы, может значительно ускорить его работу, потому что браузеру не придется загружать какие-либо файлы шрифтов, ведь они уже есть в системе. Это верно для, так называемых, "веб безопасных" шрифтов. Прелесть "системных" шрифтов заключается в том, что они соответствуют настройкам, используемым в ОС, таким образом, мы получаем комфортный вид.
В каждой системе используются свои шрифты. Например:
| ОС | Версия | Системный шрифт |
|---|---|---|
| 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";
}
В полном примере Джонатана демонстрируется, как можно определить разные варианты семейства системных шрифтов, включая курсив, жирный шрифт и др.
