Door standaard het systeemlettertype van een bepaald besturingssysteem te gebruiken, kunnen de prestaties worden verbeterd omdat de browser geen lettertypebestanden hoeft te downloaden, maar een bestand gebruikt dat hij al had. Dat geldt echter voor elk "webveilig" lettertype. Het mooie van "systeemlettertypen" is dat het overeenkomt met wat het huidige besturingssysteem gebruikt, dus het kan er comfortabel uitzien.
Wat zijn die systeemlettertypen? Op het moment van schrijven is het als volgt verdeeld:
| OS | Versie | Systeemlettertype |
|---|---|---|
| Mac OS X | de kapitein | San Francisco |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Buitenbeentjes | Lucida Grande |
| ramen | Uitzicht | Segoe UI |
| ramen | XP | Tahoma |
| ramen | 3.1 voor ME | Microsoft Sans Serif |
| Android | IJs Sandwich (4.0) + | Roboto |
| Android | Cupcake (1.5) naar Honeycomb (3.2.6) | Droid Sans |
| Ubuntu | Alle versies | Ubuntu |
Ga nu al naar het fragment!
De reden voor het voorwoord is dat het laat zien hoe diep u mogelijk terug moet gaan om systeemlettertypen te ondersteunen. Bovendien helpt het te laten zien dat er met nieuwe systeemversies nieuwe lettertypen komen, en dus de mogelijkheid om uw lettertypestapel bij te werken.
Methode 1: systeemlettertypen op elementniveau
Chrome en Safari hebben onlangs "system-ui" uitgebracht, een generieke lettertypefamilie die kan worden gebruikt in plaats van "-apple-system" en "BlinkMacSystemFont" in de volgende voorbeelden. Hoed topje naar JJ voor de info.Een methode voor het toepassen van systeemlettertypen is door ze rechtstreeks op een element aan te roepen met behulp van de font-familyeigenschap.
GitHub gebruikt deze methode op hun site en past systeemlettertypen toe op het bodyelement:
/* 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"; )Zowel Medium als de WordPress-beheerder gebruiken een vergelijkbare aanpak, met een kleine variatie, met name ondersteuning voor Oxygen Sans (gemaakt voor het GNU + Linux-besturingssysteem) en Cantarell (gemaakt voor het GNOME-besturingssysteem). Dit fragment laat ook de ondersteuning voor bepaalde soorten emoji en symbolen vallen:
/* 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; )Opmerking: deze methode mag alleen voor de font-familyeigenschap worden gebruikt in plaats van de fontafkorting. Booking.com heeft een uitgebreid artikel gepubliceerd over de waarschuwingen die het genereert omdat het toonaangevende lettertype een prefix van een leverancier lijkt te zijn.
Methode 2: Systeemlettertypestapels
De beperking van de eerste methode is dat je elke keer dat het op een element wordt gebruikt de volledige stapel lettertypen moet aanroepen en dat dit omslachtig kan worden en je code kan opzwellen, afhankelijk van waar en hoe het wordt gebruikt.
Jonathan Neal biedt een alternatieve methode waarbij systeemlettertypen worden gedeclareerd met @font-face.
Het voordeel hiervan is dat u de lettertypen één keer kunt aangeven en dat dat dan wat u kunt doen op het font-familyterrein in plaats van elke keer een lange lijst met lettertypen.
/* 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 op dat het volledige voorbeeld van Jonathan de mogelijkheid illustreert om variaties te definiëren van de systemlettertypefamilie die in het bovenstaande fragment werd gedefinieerd om rekening te houden met cursief, vetgedrukt en extra gewichten.
Verwant
- OS-specifieke lettertypen in CSS - inclusief een JavaScript-methode om het gebruikte lettertype te testen.
- Systeemlettertypen in SVG
- Systeemlettertypen implementeren op Booking.com - Een les geleerd - Booking.com deelt hoe ze hebben geleerd dat het gebruik van een systeemlettertypenstapel in de
fontverkorte versie niet werkt zoals verwacht.