Predvolené nastavenie systémového písma konkrétneho operačného systému môže zvýšiť výkon, pretože prehľadávač nemusí sťahovať žiadne súbory písma, používa iba ten, ktorý už mal. To však platí pre každé písmo „bezpečné pre web“. Krása „systémových“ typov písma spočíva v tom, že sa zhodujú s tým, čo používa súčasný operačný systém, takže môže vyzerať pohodlne.
Čo sú to tieto systémové písma? V čase písania tohto článku sa členil takto:
| OS | Verzia | Systémové písmo |
|---|---|---|
| Mac OS X | El Capitan | San Francisco |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Mavericks | Lucida Grande |
| Windows | Vista | Segoe UI |
| Windows | XP | Tahoma |
| Windows | 3,1 k ME | Microsoft Sans Serif |
| Android | Zmrzlinový sendvič (4,0) + | Roboto |
| Android | Košíček (1,5) do plástu (3.2.6) | Droid Sans |
| Ubuntu | Všetky verzie | Ubuntu |
Dostaňte sa už k úryvku!
Dôvod predslovu je ten, že ukazuje, ako hlboko sa budete musieť vrátiť, aby ste podporili systémové písma. Pomáha tiež ukázať, že s novými systémovými verziami prichádzajú nové písma, a teda aj možnosť aktualizácie balíka fontov.
Metóda 1: Systémové písma na úrovni prvkov
Chrome a Safari nedávno dodali „system-ui“, čo je všeobecná rodina písma, ktorú je možné v nasledujúcich príkladoch použiť namiesto výrazov „-apple-system“ a „BlinkMacSystemFont“. Tip na klobúk pre JJ pre informáciu.Jedným zo spôsobov použitia systémových písiem je ich priame volanie na prvok pomocou font-familyvlastnosti.
GitHub používa túto metódu na svojich stránkach a na bodyelement aplikuje systémové písma :
/* 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"; )Stredný aj správca WordPress používajú podobný prístup s miernymi obmenami, predovšetkým podporu pre Oxygen Sans (vytvorený pre operačný systém GNU + Linux) a Cantarell (vytvorený pre operačný systém GNOME). Tento úryvok tiež ruší podporu určitých typov emodži a symbolov:
/* 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; )Poznámka: Táto metóda by sa mala použiť iba na font-familyvlastníctvo namiesto fontskratky. Booking.com zverejnil dôkladné vysvetlenie varovaní, ktoré generuje, pretože popredné písmo sa javilo ako predpona dodávateľa.
Metóda 2: Systémové fonty
Obmedzenie prvej metódy spočíva v tom, že pri každom použití prvku musíte zavolať celú hromadu typov písma, ktoré môžu byť ťažkopádne a nafúknuť váš kód v závislosti od toho, kde a ako sa používa.
Jonathan Neal ponúka alternatívnu metódu, pri ktorej sa systémové písma deklarujú pomocou @font-face.
Výhodou je, že písma môžete deklarovať raz a potom sa stanú vecami, ktoré môžete na danom mieste font-familyvlastniť, namiesto dlhého zoznamu typov písma vždy.
/* 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"; )Upozorňujeme, že celý príklad Jonathana ilustruje schopnosť definovať variácie systemrodiny fontov, ktorá bola definovaná v úryvku vyššie, aby zohľadňovala kurzívu, tučné písmo a ďalšie váhy.
Súvisiace
- Fonty špecifické pre OS v CSS - ktoré zahŕňajú metódu JavaScript na testovanie použitého písma.
- Systémové písma v SVG
- Implementácia systémových fontov na Booking.com - Poučenie - Spoločnosť Booking.com zdieľa, ako sa naučili, pomocou systémového písma na
fontskratke nefunguje podľa očakávania.