По подразбиране на системния шрифт на определена операционна система може да се увеличи производителността, тъй като браузърът не трябва да изтегля никакви файлове с шрифтове, той използва такъв, който вече е имал. Това важи за всеки шрифт, който е „безопасен в мрежата“. Красотата на „системните“ шрифтове е, че съвпада с това, което използва текущата операционна система, така че може да изглежда удобно.
Какви са тези системни шрифтове? По време на това писане тя се разпада, както следва:
| операционна система | Версия | Системен шрифт |
|---|---|---|
| Mac OS X | Ел Капитан | Сан Франциско |
| Mac OS X | Йосемити | Helvetica Neue |
| Mac OS X | Mavericks | Лучида Гранде |
| Windows | Vista | Segoe UI |
| 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стенограмата не работи както се очаква.