La font-displaypropriété définit la manière dont les fichiers de polices sont chargés et affichés par le navigateur. Il est appliqué à la @font-facerègle qui définit les polices personnalisées dans une feuille de style.
@font-face ( font-family: 'MyWebFont'; /* Define the custom font name */ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); /* Define where the font can be downloaded */ font-display: fallback; /* Define how the browser behaves during download */ )Valeurs
La font-displaypropriété accepte cinq valeurs:
auto(par défaut): permet au navigateur d'utiliser sa méthode de chargement par défaut, qui est le plus souvent similaire à lablockvaleur.block: Indique au navigateur de masquer brièvement le texte jusqu'à ce que la police soit entièrement téléchargée. Plus précisément, le navigateur dessine le texte avec un espace réservé invisible, puis le remplace par la police personnalisée dès son chargement. Ceci est également connu comme un «flash de texte invisible» ou FOIT.swap: Indique au navigateur d'utiliser la police de secours pour afficher le texte jusqu'à ce que la police personnalisée soit entièrement téléchargée. Ceci est également connu sous le nom de «flash de texte sans style» ou FOUT.fallback: Agit comme un compromis entre les valeursautoetswap. Le navigateur masquera le texte pendant environ 100 ms et, si la police n'a pas encore été téléchargée, utilisera le texte de remplacement. Il basculera vers la nouvelle police après son téléchargement, mais uniquement pendant une courte période d'échange (probablement 3 secondes).optional: Commefallback, cette valeur indique au navigateur de masquer initialement le texte, puis de passer à une police de secours jusqu'à ce que la police personnalisée soit disponible. Cependant, cette valeur permet également au navigateur de déterminer si la police personnalisée est même utilisée du tout, en utilisant la vitesse de connexion de l'utilisateur comme un facteur déterminant où les connexions plus lentes sont moins susceptibles de recevoir la police personnalisée.
Voici une autre façon de penser à eux
| Période de blocage | Période d'échange | |
|---|---|---|
| bloquer | Court | Infini |
| échanger | Aucun | Infini |
| se retirer | Extrêmement court | Court |
| optionnel | Extrêmement court | Aucun |
Pourquoi nous avons besoin font-display
Avant d'avoir un support généralisé pour @font-face, notre arsenal typographique était limité aux polices locales, où les seules polices disponibles étaient celles qui étaient préchargées sur l'ordinateur de l'utilisateur final. Nous appelons ces polices «Web safe» car le navigateur n'a pas besoin de télécharger quoi que ce soit pour qu'elles soient rendues.
Puis vint la @font-facerègle qui donna aux concepteurs Web et aux développeurs front-end de nouveaux pouvoirs typographiques comme jamais auparavant. Cela nous a permis de télécharger des fichiers de polices sur un serveur et d'écrire un ensemble de règles dans nos feuilles de style qui nomment la police et indiquent au navigateur où télécharger les fichiers. Cela a également donné naissance à des services comme Google Fonts, qui ont apporté des polices personnalisées au grand public. Enfin, un obstacle majeur qui séparait la conception Web de la conception imprimée avait été renversé!
Cependant, les polices personnalisées sont venues (et continuent à venir) à un coût. Les fichiers de polices peuvent être volumineux et le temps supplémentaire pour télécharger les fichiers peut ralentir les performances d'un site, en particulier pour les appareils sur une connexion réseau plus lente. Le coût supplémentaire pour les utilisateurs sur des plans de données limités est également devenu un facteur.
Une autre préoccupation particulière qui a surgi avec les polices personnalisées est ce qui a été surnommé un «flash de texte sans style» ou FOUT pour faire court. Les navigateurs afficheraient par défaut une police système en attendant le téléchargement de la police personnalisée. Cela a permis aux pages Web de se charger plus rapidement, mais a suscité des inquiétudes parmi les concepteurs Web qui considéraient cela comme un détournement de l'expérience utilisateur et une fausse représentation du design prévu. Aujourd'hui, les navigateurs Web cachent généralement le texte jusqu'à ce que la police personnalisée soit téléchargée, ce que nous appelons maintenant un «éclair de texte invisible» ou FOIT.
Ni FOUT ni FOIT n'est génial. Nous avons des moyens d'optimiser les performances des polices personnalisées pour aider à atténuer les effets. Cependant, nous devons maintenant font-displaydire au navigateur si nous préférons FOUT, FOIT ou même quelque chose entre les deux.
Test de support
Avertissement intéressant noté par Šime Vidas:
CSS font-display est un
@font-facedescripteur et non une propriété, donc sa prise en charge dans le navigateur ne peut pas être testée avec des requêtes de fonctionnalités (@supportsrègle CSS et API CSS.supports).
Plus d'information
- Spécification de niveau 1 du module Contrôles de rendu des polices CSS: Une ébauche de la spécification de la propriété.
font-displaypour les masses: Jeremy Wagner nous a présenté la propriété ici sur CSS-Tricks.- Utilisation
@font-face: une explication complète de la règle et des meilleures pratiques pour savoir comment l'utiliser. - Pile de polices système: extrait de code permettant de renoncer complètement aux polices personnalisées et de s'appuyer uniquement sur les polices système d'un utilisateur.
- Contrôler les performances des polices avec
font-display: Une rédaction fine sur le sujet par Google.
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 60 | 58 | Non | 79 | 11,1 |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 81 | 11,3-11,4 |