Системный шрифт онлайн урок.


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

Что это за системные шрифты? На момент написания этой статьи он разбивается следующим образом:

Системный шрифтСан-Франциско
Mac OS XEl Capitan
Mac OS XYosemite
Mac OS X Маверикс
WindowsXP

/* 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 admin используют аналогичный подход с небольшим изменением, особенно поддерживают 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вместошрифтастенографии. 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";
}

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

# Связанные