Att ställa in standardtypen för ett visst operativsystem kan öka prestandan eftersom webbläsaren inte behöver ladda ner några teckensnittsfiler utan använder en som den redan hade. Det är sant för alla "webbsäkra" teckensnitt, dock. Det fina med "system" -teckensnitt är att det matchar det nuvarande operativsystemet använder, så det kan vara ett bekvämt utseende.
Vilka är dessa systemteckensnitt? När detta skrivs bryts det ner enligt följande:
| OS | Version | Systemteckensnitt |
|---|---|---|
| Mac OS X | El Capitan | San Francisco |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Mavericks | Lucida Grande |
| Windows | Perspektiv | Användargränssnitt för Segoe |
| Windows | XP | Tahoma |
| Windows | 3.1 till MIG | Microsoft Sans Serif |
| Android | Glasssmörgås (4.0) + | Roboto |
| Android | Cupcake (1.5) till Honeycomb (3.2.6) | Droid Sans |
| Ubuntu | Alla versioner | Ubuntu |
Gå till utdraget redan!
Anledningen till förordet är att den visar hur djupt du kan behöva gå tillbaka för att stödja systemteckensnitt. Dessutom hjälper det till att med nya systemversioner kommer nya teckensnitt och därmed möjligheten att behöva uppdatera din teckensnittsstack.
Metod 1: Systemteckensnitt på elementnivå
Chrome och Safari har nyligen levererat "system-ui" som är en generisk typsnittsfamilj som kan användas istället för "-apple-system" och "BlinkMacSystemFont" i följande exempel. Hatttips till JJ för info.En metod för att applicera systemteckensnitt är att direkt anropa dem till ett element som använder font-familyegenskapen.
GitHub använder den här metoden på sin webbplats och använder systemteckensnitt på bodyelementet:
/* 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"; )Både Medium och WordPress-administratören använder ett liknande tillvägagångssätt, med en liten variation, särskilt stöd för Oxygen Sans (skapat för GNU + Linux-operativsystemet) och Cantarell (skapat för GNOME-operativsystemet). Detta utdrag tappar också stöd för vissa typer av emoji och symboler:
/* 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; )Obs! Den här metoden ska endast användas på font-familyfastigheten istället för fontstenografi. Booking.com publicerade en grundlig beskrivning av varningarna som genereras på grund av att det främsta teckensnittet verkar vara ett leverantörsprefix.
Metod 2: Systemstaplar
Begränsningen av den första metoden är att du måste ringa hela stapeln med teckensnitt varje gång den används på ett element och som kan bli besvärlig och svälla din kod, beroende på var och hur den används.
Jonathan Neal erbjuder en alternativ metod där systemteckensnitt deklareras med @font-face.
Fördelen här är att du kan deklarera teckensnitten en gång och sedan blir det det du kan på font-familyfastigheten istället för den långa listan med teckensnitt varje gång.
/* 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"; )Observera att Jonathans fullständiga exempel illustrerar möjligheten att definiera variationer av systemteckensnittsfamiljen som definierades i utdraget ovan för att ta hänsyn till kursiv, fetstil och ytterligare vikter.
Relaterad
- OS-specifika teckensnitt i CSS - som inkluderar en JavaScript-metod för att testa teckensnittet som används.
- Systemteckensnitt i SVG
- Implementera systemteckensnitt på Booking.com - en lärdom - Booking.com delar hur de lärde sig med hjälp av en systemtypstapel på
fontförkortningen fungerar inte som förväntat.