За замовчуванням системний шрифт певної операційної системи може підвищити продуктивність, оскільки браузер не повинен завантажувати будь-які шрифтові файли, він використовує вже наявний. Однак це стосується будь-якого шрифта, що захищає веб-сторінки. Краса «системних» шрифтів полягає в тому, що вони відповідають тому, що використовує поточна ОС, тому може бути зручним виглядом.
Що це за системні шрифти? На момент написання цієї статті вона розбивається наступним чином:
| ОС | Версія | Системний шрифт |
|---|---|---|
| Mac OS X | Ель-Капітан | Сан Франциско |
| Mac OS X | Йосемітський | Helvetica Neue |
| Mac OS X | Маверікс | Люсіда Гранде |
| Windows | Vista | Інтерфейс користувача Segoe |
| Windows | XP | Тахома |
| Windows | 3.1 до мене | 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стенограмі, і не працює належним чином.