Výchozí nastavení systémového písma konkrétního operačního systému může zvýšit výkon, protože prohlížeč nemusí stahovat žádné soubory písem, používá jeden, který již měl. To však platí pro jakékoli písmo „bezpečné pro web“. Krása „systémových“ písem spočívá v tom, že se shodují s tím, co používá současný operační systém, takže může vypadat pohodlně.
Co jsou to za systémová písma? V době psaní tohoto článku se člení takto:
| OS | Verze | Systémové písmo |
|---|---|---|
| Mac OS X | El Capitan | San Francisco |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Mavericks | Lucida Grande |
| Okna | Průhled | Segoe UI |
| Okna | XP | Tahoma |
| Okna | 3,1 ME | Microsoft Sans Serif |
| Android | Zmrzlinový sendvič (4.0) + | Roboto |
| Android | Cupcake (1.5) to Honeycomb (3.2.6) | Droid Sans |
| Ubuntu | Všechny verze | Ubuntu |
Dostaňte se k úryvku, už!
Důvod předmluvy je, že ukazuje, jak hluboko se budete muset vrátit k podpoře systémových písem. Kromě toho pomáhá ukázat, že s novými verzemi systému přicházejí nová písma, a tím i možnost nutnosti aktualizace zásobníku písem.
Metoda 1: Systémová písma na úrovni prvků
Chrome a Safari nedávno dodaly „system-ui“, což je obecná rodina písem, kterou lze v následujících příkladech použít místo „-apple-system“ a „BlinkMacSystemFont“. Tip na klobouk pro JJ pro informaci.Jednou z metod pro použití systémových písem je přímé volání na prvek pomocí font-familyvlastnosti.
GitHub používá tuto metodu na svém webu a na bodyprvek 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"; )Jak Medium, tak i administrátor WordPressu používají podobný přístup s mírnými obměnami, zejména s podporou Oxygen Sans (vytvořené pro operační systém GNU + Linux) a Cantarell (vytvořené pro operační systém GNOME). Tento úryvek také upouští podporu určitých typů emodži a 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; )Poznámka: Tato metoda by měla být použita pouze na font-familyvlastnost namísto fontzkratky. Booking.com zveřejnil důkladný zápis upozornění, která generuje kvůli tomu, že se hlavní písmo jeví jako prefix dodavatele.
Metoda 2: Systémové fonty
Omezení první metody spočívá v tom, že při každém použití prvku musíte zavolat plný zásobník písem a ten může být těžkopádný a nafouknout váš kód v závislosti na tom, kde a jak se používá.
Jonathan Neal nabízí alternativní metodu, kdy jsou systémová písma deklarována pomocí @font-face.
Výhodou je, že můžete písma deklarovat jednou a poté se stane věcí, kterou můžete na font-familyvlastnosti namísto dlouhého seznamu písem pokaždé.
/* 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"; )Všimněte si, že celý Jonathanův příklad ilustruje schopnost definovat varianty systemrodiny fontů, které byly definovány ve fragmentu výše, aby zohledňovaly kurzívu, tučné písmo a další váhy.
Příbuzný
- Fonty specifické pro OS v CSS - které zahrnují metodu JavaScriptu pro testování používaného písma.
- Systémová písma v SVG
- Implementace systémových písem na Booking.com - Poučení - Booking.com sdílí, jak se naučili pomocí zásobníku systémových písem na
fontzkratce, nefunguje podle očekávání.