Standard til systemfonten i et bestemt operativsystem kan øge ydeevnen, fordi browseren ikke behøver at downloade nogen fontfiler, den bruger en, den allerede havde. Det gælder dog for enhver “websikker” skrifttype. Det skønne ved "system" -skrifttyper er, at det matcher, hvad det aktuelle operativsystem bruger, så det kan være et behageligt udseende.
Hvad er disse systemskrifttyper? På tidspunktet for denne skrivning opdeles den som følger:
| OS | Version | System skrifttype |
|---|---|---|
| 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 til ME | Microsoft Sans Serif |
| Android | Ice Cream Sandwich (4.0) + | Roboto |
| Android | Cupcake (1.5) til Honeycomb (3.2.6) | Droid Sans |
| Ubuntu | Alle versioner | Ubuntu |
Gå til uddraget allerede!
Årsagen til forordet er, at det viser, hvor dybt du muligvis har brug for at gå tilbage for at understøtte systemfonte. Derudover hjælper det med at vise, at der med nye systemversioner kommer nye skrifttyper og dermed muligheden for at skulle opdatere din fontstak.
Metode 1: Systemskrifttyper på elementniveau
Chrome og Safari har for nylig afsendt "system-ui", som er en generisk skrifttypefamilie, der kan bruges i stedet for "-apple-system" og "BlinkMacSystemFont" i de følgende eksempler. Hat tip til JJ for info.En metode til anvendelse af systemfonte er ved direkte at kalde dem på et element ved hjælp af font-familyegenskaben.
GitHub bruger denne metode på deres websted og anvender systemfonte 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-administratoren bruger en lignende tilgang med en lille variation, især understøttelse af Oxygen Sans (oprettet til GNU + Linux-operativsystemet) og Cantarell (oprettet til GNOME-operativsystemet). Dette uddrag dropper også understøttelse af 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; )Bemærk: Denne metode skal kun bruges på font-familyejendommen i stedet for fontstenografi. Booking.com offentliggjorde en grundig beskrivelse af de advarsler, det genererer på grund af, at den førende skrifttype ser ud til at være et leverandørpræfiks.
Metode 2: Systemskriftsstakke
Begrænsningen af den første metode er, at du skal kalde den fulde stak skrifttyper, hver gang den bruges på et element, og det kan blive besværligt og blæse din kode, afhængigt af hvor og hvordan den bruges.
Jonathan Neal tilbyder en alternativ metode, hvor systemfonte er deklareret ved hjælp af @font-face.
Fordelen her er, at du kan erklære skrifttyperne en gang, og så bliver det den ting, du kan på font-familyejendommen i stedet for den lange liste over skrifttyper 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"; )Bemærk, at Jonathan's fulde eksempel illustrerer evnen til at definere variationer af systemfontfamilien, der blev defineret i uddraget ovenfor for at tage højde for kursiv, fed skrift og yderligere vægte.
Relaterede
- OS-specifikke skrifttyper i CSS - som inkluderer en JavaScript-metode til test af den anvendte skrifttype.
- Systemskrifttyper i SVG
- Implementering af systemskrifttyper på Booking.com - En lektion - Booking.com deler, hvordan de lærte at bruge en systemskriftsstabel på
fontstenografi, fungerer ikke som forventet.