Å standardisere systemfonten til et bestemt operativsystem kan øke ytelsen fordi nettleseren ikke trenger å laste ned noen fontfiler, den bruker en den allerede hadde. Det er sant for enhver "websikker" font, skjønt. Det fine med "system" -skrifttyper er at det samsvarer med det gjeldende operativsystemet bruker, slik at det kan være et behagelig utseende.
Hva er disse systemfonter? I skrivende stund brytes den ned som følger:
| OS | Versjon | System Font |
|---|---|---|
| Mac OS X | El Capitan | San Fransisco |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Mavericks | Lucida Grande |
| Windows | Vista | Segoe UI |
| Windows | XP | Tahoma |
| Windows | 3.1 til MEG | Microsoft Sans Serif |
| Android | Iskremsandwich (4.0) + | Roboto |
| Android | Cupcake (1.5) til Honeycomb (3.2.6) | Droid Sans |
| Ubuntu | Alle versjoner | Ubuntu |
Kom til kodebiten, allerede!
Årsaken til forordet er at den viser hvor dypt du kan trenge for å gå tilbake for å støtte systemfonter. I tillegg hjelper det å vise at det med nye systemversjoner kommer nye skrifter, og dermed muligheten for å måtte oppdatere skriftstakken.
Metode 1: Systemfonter på elementnivå
Chrome og Safari har nylig sendt "system-ui", som er en generell fontfamilie som kan brukes i stedet for "-apple-system" og "BlinkMacSystemFont" i de følgende eksemplene. Hattetips til JJ for info.En metode for å bruke systemfonter er å kalle dem direkte til et element som bruker font-familyeiendommen.
GitHub bruker denne metoden på nettstedet sitt og bruker systemfonter 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 og WordPress-admin bruker en lignende tilnærming, med en liten variasjon, spesielt støtte for Oxygen Sans (opprettet for GNU + Linux-operativsystemet) og Cantarell (opprettet for GNOME-operativsystemet). Denne kodebiten gir også støtte for visse typer emoji og 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; )Merk: Denne metoden skal bare brukes på font-familyeiendommen i stedet for fontstenografi. Booking.com publiserte en grundig beskrivelse av advarslene det genererer på grunn av at den ledende skrifttypen ser ut til å være et leverandørprefiks.
Metode 2: System Font Stacks
Begrensningen med den første metoden er at du må ringe hele stakken med skrifter hver gang den brukes på et element, og som kan bli tungvint og oppblåse koden din, avhengig av hvor og hvordan den brukes.
Jonathan Neal tilbyr en alternativ metode der systemfonter deklareres ved hjelp av @font-face.
Fordelen her er at du kan erklære skriftene en gang, og da blir det tingen du kan på font-familyeiendommen i stedet for den lange listen over skrifter hver gang.
/* 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"; )Merk at Jonathan's fulle eksempel illustrerer muligheten til å definere varianter av systemskriftfamilien som ble definert i kodebiten ovenfor for å gjøre rede for kursiv, fet skrift og ekstra vekter.
I slekt
- OS-spesifikke skrifttyper i CSS - som inkluderer en JavaScript-metode for å teste skriften som er i bruk.
- Systemskrifter i SVG
- Implementering av systemfonter på Booking.com - En leksjon - Booking.com deler hvordan de lærte å bruke en systemstabel på
fontkortformat, fungerer ikke som forventet.