Utiliser par défaut la police système d'un système d'exploitation particulier peut améliorer les performances car le navigateur n'a pas à télécharger de fichiers de polices, il en utilise un qu'il avait déjà. C'est vrai pour toute police «Web safe». La beauté des polices «système» est qu'elles correspondent à ce qu'utilise le système d'exploitation actuel, ce qui leur confère un aspect confortable.
Quelles sont ces polices système? Au moment d'écrire ces lignes, il se décompose comme suit:
| OS | Version | Police système |
|---|---|---|
| Mac OS X | El Capitan | San Francisco |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Non-conformistes | Lucida Grande |
| les fenêtres | Vue | Interface utilisateur Segoe |
| les fenêtres | XP | Tahoma |
| les fenêtres | 3.1 à ME | Microsoft Sans Serif |
| Android | Sandwich à la crème glacée (4.0) + | Roboto |
| Android | Cupcake (1.5) à Honeycomb (3.2.6) | Droid Sans |
| Ubuntu | Toutes les versions | Ubuntu |
Accédez à l'extrait, déjà!
La raison de la préface est qu'elle montre à quelle profondeur vous devrez peut-être revenir pour prendre en charge les polices système. De plus, cela aide à montrer qu'avec les nouvelles versions du système, de nouvelles polices apparaissent, et donc la possibilité de devoir mettre à jour votre pile de polices.
Méthode 1: polices système au niveau de l'élément
Chrome et Safari ont récemment livré «system-ui» qui est une famille de polices générique qui peut être utilisée à la place de «-apple-system» et «BlinkMacSystemFont» dans les exemples suivants. Pointe du chapeau à JJ pour l'info.Une méthode pour appliquer des polices système consiste à les appeler directement sur un élément à l'aide de la font-familypropriété.
GitHub utilise cette méthode sur son site, en appliquant des polices système sur l' bodyélément:
/* 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"; )Medium et l'administrateur de WordPress utilisent une approche similaire, avec une légère variation, notamment la prise en charge d'Oxygen Sans (créé pour le système d'exploitation GNU + Linux) et Cantarell (créé pour le système d'exploitation GNOME). Cet extrait de code supprime également la prise en charge de certains types d'emoji et de symboles:
/* 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; )Remarque: cette méthode ne doit être utilisée que sur la font-familypropriété au lieu du fontraccourci. Booking.com a publié un article détaillé sur les avertissements qu'il génère en raison du fait que la police principale semble être un préfixe de fournisseur.
Méthode 2: piles de polices système
La limitation de la première méthode est que vous devez appeler la pile complète de polices chaque fois qu'elle est utilisée sur un élément et cela peut devenir fastidieux et gonfler votre code, en fonction de l'endroit et de la manière dont il est utilisé.
Jonathan Neal propose une méthode alternative où les polices système sont déclarées en utilisant @font-face.
L'avantage ici est que vous pouvez déclarer les polices une fois, puis cela devient la chose que vous pouvez sur la font-familypropriété au lieu de la longue liste de polices à chaque fois.
/* 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"; )Notez que l'exemple complet de Jonathan illustre la capacité de définir des variations de la systemfamille de polices qui a été définie dans l'extrait ci-dessus pour prendre en compte les italiques, les caractères gras et les poids supplémentaires.
En rapport
- Polices spécifiques au système d'exploitation en CSS - qui comprend une méthode JavaScript pour tester la police utilisée.
- Polices système en SVG
- Implémentation de polices système sur Booking.com - Une leçon apprise - Booking.com explique comment ils ont appris en utilisant une pile de polices système sur la
fontsténographie ne fonctionne pas comme prévu.