Подразумевање системског фонта одређеног оперативног система може повећати перформансе, јер прегледач не мора да преузима ниједну датотеку фонта, већ користи онај који је већ имао. То важи за било који фонт који је „безбедан за веб“. Лепота „системских“ фонтова је у томе што се подудара са оним што користи тренутни ОС, тако да може бити угодног изгледа.
Који су то системски фонтови? У време писања овог текста, то се дели на следећи начин:
| ОС | Верзија | Системски фонт |
|---|---|---|
| Мац ОС Кс | Ел Цапитан | Сан Франциско |
| Мац ОС Кс | Иосемите | Хелветица Неуе |
| Мац ОС Кс | Маверицкс | Луцида Гранде |
| Виндовс | Виста | Сегое УИ |
| Виндовс | КСП | Тахома |
| Виндовс | 3.1 мени | Мицрософт Санс Сериф |
| Андроид | Сендвич са сладоледом (4.0) + | Робото |
| Андроид | Кекс (1.5) до саћа (3.2.6) | Дроид Санс |
| Убунту | Све верзије | Убунту |
Дођите већ до исечка!
Разлог за предговор је тај што показује колико дубоко ће вам требати повратак да бисте подржали системске фонтове. Поред тога, помаже да се покаже да са новим верзијама система долазе нови фонтови, а самим тим и могућност потребе за ажурирањем низа фонтова.
1. метод: Системски фонтови на нивоу елемента
Цхроме и Сафари су недавно испоручили „систем-уи“ који је генеричка породица фонтова која се може користити уместо „-аппле-систем“ и „БлинкМацСистемФонт“ у следећим примерима. Савет шеширу за информације.Једна метода за примену системских фонтова је директно позивање на елемент помоћу font-familyсвојства.
ГитХуб користи ову методу на својој веб локацији, примењујући системске фонтове на 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"; )И Медиум и ВордПресс администратор користе сличан приступ, са малим варијацијама, а посебно подршка за Окиген Санс (створен за оперативни систем ГНУ + Линук) и Цантарелл (створен за оперативни систем ГНОМЕ). Овај исечак такође уклања подршку за одређене врсте емоџија и симбола:
/* 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скраћеници. Боокинг.цом је објавио детаљни опис упозорења која генерише због тога што се чини да је водећи фонт префикс добављача.
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породице фонтова која је дефинисана у горњем исечку како би се узели у обзир курзив, подебљање и додатне тежине.
Повезан
- Фонтови специфични за ОС у ЦСС-у - који укључују ЈаваСцрипт метод за тестирање фонта који се користи.
- Системски фонтови у СВГ
- Примена системских фонтова на Боокинг.цом - научена лекција - Боокинг.цом дели како су научили користећи системски стек фонтова у
fontскраћеници не ради како се очекивало.