Использование по умолчанию системного шрифта конкретной операционной системы может повысить производительность, потому что браузеру не нужно загружать какие-либо файлы шрифтов, он использует тот, который у него уже был. Однако это верно для любого «веб-безопасного» шрифта. Прелесть «системных» шрифтов в том, что они соответствуют тому, что использует текущая ОС, поэтому они могут выглядеть комфортно.
Что это за системные шрифты? На момент написания этой статьи он распался следующим образом:
| Операционные системы | Версия | Системный шрифт |
|---|---|---|
| Mac OS X | Эль-Капитан | Сан-Франциско |
| Mac OS X | Йосемити | Helvetica Neue |
| Mac OS X | Mavericks | Люсида Гранде |
| Windows | Vista | Segoe UI |
| Windows | XP | Тахома |
| Windows | 3.1 в ME | Microsoft Sans Serif |
| Android | Сэндвич с мороженым (4.0) + | Робото |
| Android | Кекс (1.5) в Соты (3.2.6) | Droid Sans |
| Ubuntu | Все версии | Ubuntu |
Уже переходите к сниппету!
Причина введения предисловия в том, что оно показывает, насколько глубоко вам может потребоваться вернуться к поддержке системных шрифтов. Кроме того, это помогает показать, что с новыми версиями системы появляются новые шрифты и, следовательно, возникает необходимость обновления стека шрифтов.
Метод 1. Системные шрифты на уровне элементов
Chrome и Safari недавно выпустили «system-ui», которое является общим семейством шрифтов, которое можно использовать вместо «-apple-system» и «BlinkMacSystemFont» в следующих примерах. Подсказка JJ за информацию.Один из способов применения системных шрифтов - их прямой вызов элемента с помощью font-familyсвойства.
GitHub использует этот метод на своем сайте, применяя системные шрифты к bodyэлементу:
/* System Fonts as used by 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). Этот фрагмент также отказывается от поддержки определенных типов эмодзи и символов:
/* System Fonts as used by Medium and WordPress */ body ( font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; )Примечание. Этот метод следует использовать только для font-familyсвойства, а не для fontсокращения. Booking.com опубликовал подробный отчет о предупреждениях, которые он генерирует из-за того, что ведущий шрифт выглядит как префикс поставщика.
Метод 2: стеки системных шрифтов
Ограничение первого метода заключается в том, что вам нужно вызывать полный стек шрифтов каждый раз, когда он используется в элементе, и это может стать громоздким и раздувать ваш код в зависимости от того, где и как он используется.
Джонатан Нил предлагает альтернативный метод, при котором системные шрифты объявляются с использованием @font-face.
Преимущество здесь в том, что вы можете объявить шрифты один раз, а затем это становится тем, что вы можете делать в font-familyсвойстве, вместо длинного списка шрифтов каждый раз.
/* Define the "system" 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"); ) /* Now, let's apply it on an element */ body ( font-family: "system"; )Обратите внимание, что полный пример Джонатана иллюстрирует возможность определять варианты семейства systemшрифтов, которые были определены в приведенном выше фрагменте, для учета курсива, полужирного шрифта и дополнительных весов.
Связанный
- Шрифты, специфичные для ОС, в CSS - включая метод JavaScript для тестирования используемого шрифта.
- Системные шрифты в SVG
- Внедрение системных шрифтов на Booking.com - извлеченный урок - Booking.com рассказывает, как они узнали, что использование стека системных шрифтов в
fontсокращении работает не так, как ожидалось.