Nous prenons les polices Web pour acquis ces jours-ci. Nous n'avons pas toujours eu la possibilité de définir notre texte dans presque toutes les polices. Je veux dire, nous pourrions, mais alors nous devions soupirer et dire: «Eh bien, ça va bien sur les ordinateurs de cinq personnes. J'espère que tout le monde aime Verdana! "
Les polices Web ont apporté une certaine variété nécessaire à la vue, quelques abus de typographie, un poids de page supplémentaire au fur et à mesure du chargement des polices et des éclats de texte non stylé ou invisible. Eh bien ... omelette, oeufs, casser, vous avez l’idée. Cela devait arriver.
Si les utilisateurs restent trop longtemps à regarder une page vierge, ils peuvent simplement décider de partir
C'est un peu un problème de convivialité, cependant, lorsque le texte est invisible jusqu'à ce que la police personnalisée soit chargée. Si les utilisateurs restent trop longtemps à la recherche d’une page vierge (et qu’une durée excessive peut être de quelques millisecondes), ils peuvent simplement décider de partir. Et c'est assez juste. Ce n'est pas convivial.
Quelques années plus tard, nous progressons dans le contrôle de la charge des polices. Jusqu'à présent, nous l'avons fait avec des bibliothèques et des API tierces. Mais maintenant, enfin, cette fonctionnalité vient à CSS.
Entrez la propriété font-display . Il est actuellement uniquement dans Opera, Opera pour Android et Chrome. (Il a été introduit pour la première fois dans Chrome 49 en tant que fonctionnalité expérimentale.)
Il comporte quatre options: auto , swap , fallback et optional .
Fondamentalement, en choisissant font-display: auto laissera le navigateur agir comme il le fait maintenant. Le texte sera invisible jusqu'à ce que la police personnalisée soit chargée.
swap est probablement ce que la plupart des gens vont utiliser. Si la police n'est pas chargée, la police disponible suivante définie dans la propriété font-family sera utilisée. Lorsque la police Web est chargée, elle est remplacée. Il s’agit essentiellement d’un flash de contenu non stylé, mais je pense qu’il est plus convivial que le contenu invisible.
Le repli divise la différence entre ces deux premières options. Pour un délai de 100 millisecondes, le texte sera invisible. Si la police personnalisée est chargée, elle sera utilisée. Si ce n'est pas le cas, la police suivante dans la ligne de succession règnera jusqu'à ce que la police personnalisée soit chargée.
facultatif fonctionne comme un retour, sauf que le navigateur peut décider de ne pas charger la police personnalisée du tout, si la connexion de l'utilisateur est trop lente
optionnel fonctionne comme une solution de secours, sauf que le navigateur peut décider de ne pas charger la police personnalisée si la connexion de l'utilisateur est trop lente.
Et là nous l'avons. declaration. Attention, la police d'affichage est destinée à être utilisée dans une déclaration @ font-face . Cela signifie qu'il ne fonctionnera pas pour le moment avec des fournisseurs de polices tiers tels que Typekit ou Google Fonts. Une fois que font-display devient plus répandu, il est probable qu'ils implémenteront une sorte d'option pour cette fonctionnalité.