L'un des inconvénients de l'utilisation des polices Web est que si une police n'est pas disponible sur l'appareil d'un utilisateur, il doit être téléchargé. Cela signifie qu'avant que la police ne devienne disponible, le navigateur doit décider comment gérer l'affichage de tout bloc de texte qui utilise cette police. Et il doit le faire d'une manière qui n'a pas d'impact significatif sur l'expérience utilisateur et les performances perçues.
Au fil du temps, les navigateurs ont adopté plusieurs stratégies pour atténuer ce problème. Mais ils le font de différentes manières et hors du contrôle des développeurs, qui ont dû concevoir plusieurs techniques et solutions de contournement pour surmonter ces problèmes.
Entrez le descripteur de FONT-Display pour le RULLE @ FONT-FACE. Cette fonction CSS présente un moyen de normaliser ces comportements et de fournir plus de contrôle aux développeurs.
Avant de regarder en détail les différentes fonctionnalités offertes par Font-Display, considérons brièvement comment vous pourriez utiliser la fonctionnalité dans votre CSS.
Tout d'abord, Font-Display n'est pas une propriété CSS mais, comme mentionné dans l'intro, il s'agit d'un descripteur pour le Rule @ Font-Face. Cela signifie qu'il doit être utilisé à l'intérieur d'une règle de Font-Face, comme indiqué dans le code suivant:
<span><span>@font-face</span> {
</span> <span>font-family: 'Saira Condensed';
</span> <span>src: <span>url(fonts/sairacondensed.woff2)</span> format('woff2');
</span> <span>font-display: swap;
</span><span>}</span>Dans cet extrait, je définis une valeur d'échange pour la police Saira condensée.
Les mots clés pour toutes les valeurs disponibles sont:
La valeur initiale de la FONT-Display est automatique.
Dans les sections ultérieures, je vais passer en revue chacune de ces valeurs en détail. Mais d'abord, examinons la période de temps utilisée par le navigateur pour déterminer la police. Lorsque je discute de chacune des valeurs, je vais expliquer les différents aspects de la chronologie et comment ceux-ci se comportent pour chaque valeur.
Au cœur de cette fonctionnalité se trouve le concept de la chronologie de la police. Le temps de chargement de la police, à partir de sa demande et se terminant par son chargement ou son échec réussi, peut être divisé en trois périodes consécutives qui dictent comment un navigateur doit rendre le texte. Ces trois périodes sont les suivantes:
L'ajustement de la durée de ces périodes vous permet de configurer une stratégie de rendu de texte personnalisée. En particulier, ces durées peuvent s'effondrer à zéro ou s'étendre à l'infini, comme je vais vous le montrer dans les sections suivantes.
mais ces durées ne peuvent pas être explicitement attribuées par le développeur. Cette possibilité a été examinée à un stade précoce de la spécification, mais a été abandonnée. Au lieu de cela, un ensemble de valeurs de mots clés prédéfinis qui peuvent gérer la majorité des cas d'utilisation sont fournies, comme indiqué dans la section précédente.
Voyons comment chacun de ces mots clés gère le processus de chargement et d'affichage de la police.
Cette valeur indique au navigateur d'adopter le comportement d'affichage de police par défaut choisi par le navigateur. Souvent, cette stratégie est similaire à la valeur suivante, Block.
Avec cette valeur, après une courte période de bloc (la spécification recommande une durée de trois secondes), la période d'échange s'étend à l'infini. Cela signifie que dans cette circonstance, la période de défaillance est absente.
Alors que le navigateur attend brièvement la police demandée, elle rend le texte avec la police de secours invisible; Après cela, si la police n'est pas encore disponible, la police de secours est rendue visible; Et chaque fois que le téléchargement se termine, le navigateur remettait le texte avec la police recherchée.
Vous pouvez regarder ce comportement dans la vidéo suivante, qui utilise une page de test simple qui intègre une police Web spécifique pour son titre:
Au début de la charge de page, l'en-tête est invisible mais il est là, dans le dom. Après environ trois secondes, si la police n'est pas encore disponible, le texte est rendu visible avec la police de secours. Dans la démo vidéo, j'imite les conditions de réseau médiocres à l'aide de la fonction de limitation du réseau de Chrome Devtools. Enfin, lorsque la police parvient à télécharger, le titre est rendu avec lui.
Avec cette valeur, la période de bloc s'effondre à 0 et la période d'échange s'étend à l'infini. Par conséquent, ici aussi, la période de défaillance est manquante.
En d'autres termes, le navigateur n'attend pas la police mais rend immédiatement le texte avec la police de secours; Ensuite, chaque fois que la police est disponible, le texte est rendu avec lui.
Vérifions ceci:
Il s'agit de la première valeur qui intègre la période de défaillance. Après une période de bloc très courte (100 ms sont recommandés), la période d'échange a maintenant une courte durée (3S est recommandé). En conséquence, si la police demandée n'est pas prête à la fin de cette période, le texte s'affichera en utilisant la police de secours pour la durée de la visite de la page. Cela évite de déranger le visiteur de la page avec un changement de mise en page tardif qui pourrait être choquant vers l'expérience utilisateur.
Dans cette première vidéo ci-dessous, la police se charge après plus de six secondes, il n'est donc jamais échangé:
Dans la vidéo suivante, la police se charge plus rapidement, avant le délai d'expiration de la période de swap, de sorte que la police est utilisée comme prévu:
Lorsque j'ai lu la spécification pour la première fois, j'ai trouvé les noms attribués aux stratégies d'affichage des polices qui ne sont pas si claires. Ceci est même souligné dans la spécification elle-même, qui suggère des versions futures des noms d'utilisation des spécifications qui illustrent mieux l'utilisation prévue de chaque stratégie, proposant les alternatives suivantes:
mais la valeur facultative devrait rester inchangée. En effet, cette valeur capture bien l'essence du comportement qu'il déclenche. Dans ce cas, la police est considérée comme facultative pour le rendu de la page, indiquant essentiellement au navigateur: Si la police est déjà disponible, utilisez-le, sinon cela n'a pas d'importance, allez-y avec la police de secours; La police peut être prête à être utilisée sur les visites de page futures .
Avec cette valeur, le calendrier d'affichage de la police a une courte période de bloc (encore une fois, la spécification recommande un intervalle de temps de 100 ms) et une période d'échange de durée zéro. Par conséquent, la période de défaillance suit immédiatement la période de bloc, ce qui signifie que si la police n'est pas facilement disponible, elle ne sera pas utilisée pour la durée de la page. Mais la police pourrait éventuellement être entièrement téléchargée en arrière-plan et elle deviendrait donc disponible pour le rendu immédiat sur les charges de page futures.
Mais je dois souligner ici que, en particulier dans des conditions de réseau médiocres, l'agent utilisateur est libre d'abandonner ou même de ne pas commencer le téléchargement de la police. Il s'agit de ne pas avoir un impact inutilement sur la qualité de la connexion réseau. Par conséquent, le site est toujours utilisable, mais la police ne sera pas immédiatement disponible sur les charges de page futures.
Dans la vidéo ci-dessous, la page de test est chargée sans étrangler le réseau. La police est téléchargée rapidement, mais seulement après la période de bloc courte, donc le texte s'affiche avec la police de secours pour toute la durée de la visite.
Dans la vidéo suivante, la page est rechargée dans les mêmes conditions de réseau, mais cette fois avec le cache activé, de simuler une deuxième visite:
Et là vous l'avez, le titre rend maintenant avec la police Web souhaitée.
Avant de passer à autre chose, notez la durée extrêmement courte d'environ 100 ms recommandée pour la période de bloc lorsque vous utilisez les valeurs de secours et facultatives. Il s'agit de permettre à une brève période pour une police à chargement rapide (ou une charge à partir du cache) à afficher avant d'utiliser la police de secours, évitant ainsi un «flash de texte non style», ou fout.
Je me suis en fait demandé pourquoi la période de bloc s'effondre à zéro lors de l'utilisation de Font-Display: Swap, au lieu d'utiliser le même intervalle court que facultatif. Il s'avère qu'il y a un problème ouvert dans le dépôt GitHub de la spécification pour faire en sorte que «swap» utilise la même «période de blocage petite» que d'autres.
Dans la discussion ci-dessus, plusieurs fois, j'ai mentionné la police de secours. Mais d'où cela vient-il?
La police de secours est la première police disponible présente dans la pile de police définie à l'aide de la propriété Font-Family sur l'élément en question.
Par exemple, sur la page de test, la valeur de la famille pour la tête est:
<span><span>@font-face</span> {
</span> <span>font-family: 'Saira Condensed';
</span> <span>src: <span>url(fonts/sairacondensed.woff2)</span> format('woff2');
</span> <span>font-display: swap;
</span><span>}</span>Ceci peut être vérifié (voir la vidéo ci-dessus pour facultatif), par exemple, sur une machine Windows, qui utilise Arial comme police rendue.
au moment de la rédaction du support pour le descripteur de la police, c'est comme suit:
Veuillez vous référer à caniuse.com pour les informations de support à jour.
Il convient de noter que la prise en charge de la police ne peut pas être testée par des requêtes de fonctionnalité, car, comme mentionné ci-dessus, ce n'est pas une propriété CSS mais un descripteur de police. Dans ce problème de github, vous trouverez une discussion sur la façon de détecter correctement cette fonction.
Une fois qu'il a été détecté que la police n'est pas prise en charge, plusieurs stratégies de secours sont possibles, mais c'est la portée de cet article. L'article Un guide complet des stratégies de chargement des polices de Zach Leatherman présente une enquête exhaustive des solutions disponibles.
Vous avez peut-être remarqué que la police utilisée dans la page de démonstration provient des polices Google, mais elle n'est pas chargée de la manière habituelle, c'est-à-dire en liant à la feuille de style fournie par le fournisseur de police. Au lieu de cela, je viens de copier l'URL de la police trouvée dans cette feuille de style et j'ai utilisé cette URL dans ma règle de Font-Face personnalisée. J'ai dû le faire parce que, comme on le voit dans la section d'utilisation, la police doit être spécifiée à l'intérieur de la règle de la police.
Y a-t-il une manière meilleure et plus adaptée aux polices Google? Les polices Google et les autres fonderies de polices tierces vont-elles prendre en charge la police?
Il y a un problème ouvert sur le dépôt de github Google Fonts où cela est discuté. Ajoutez votre 1 pour montrer votre intérêt pour cette fonctionnalité!
En outre, il convient de mentionner que le niveau 4 du module Fonts CSS propose l'utilisation de Font-Display en tant que descripteur pour les valeurs de fonction de police, pour permettre aux développeurs de définir une politique d'affichage pour les règles de Font-Face qui ne sont pas qui ne sont pas directement sous leur contrôle. Mais cela n'est pas encore implémenté par aucun agent utilisateur.
J'espère que cela vous donne un aperçu décent du descripteur de la police et de la façon dont cette fonctionnalité préfigure un avenir fort pour le rendu de police sur le Web.
Bien que cet article n'ait pas discuté des cas d'utilisation spécifiques pour les différentes stratégies mises en œuvre par Font-Display, la spécification illustre les cas d'utilisation avec quelques exemples clairs, et plusieurs des références citées sont élaborées sur ce sujet. Donc, en plus des bases que j'ai couvertes ici, vous aurez plus à regarder dans les ressources que j'ai référencées.
La propriété CSS Font-Display est une fonction CSS qui contrôle comment les polices sont affichées sur une page Web, en particulier pendant la période où la police est toujours en charge. Cette propriété est cruciale car elle a un impact significatif sur l'expérience utilisateur sur un site Web. Si une police prend trop de temps à charger, elle peut entraîner un retard dans le rendu du texte, conduisant à un phénomène appelé Flash of Invisible Text (FOIT) ou Flash of Unstyled Text (FOT). En utilisant la propriété de dispositif de police, les développeurs peuvent contrôler ce comportement et améliorer l'expérience utilisateur globale.
Quelles sont les différences entre les valeurs de la police?
Pour utiliser la propriété CSS Font-Display dans votre code, vous devez l'inclure dans votre règle @ font-face. Voici un exemple:
@ font-face {
Font-Family: 'MyFont';
src: url ('myfont.woff2') format ('woff2');
FONT -Display: swap;
}
Dans cet exemple, la propriété de désactivation de police est définie sur «Swap», ce qui signifie que le texte sera affiché immédiatement avec une police de secours si «myfont» n'est pas disponible.
La propriété CSS Font-Display peut avoir un impact significatif sur les performances du site Web. En contrôlant comment les polices sont affichées pendant le processus de chargement, il peut aider à prévenir les retards dans le rendu du texte, améliorant ainsi la vitesse de chargement perçue d'un site Web. Il peut également aider à éviter les changements de mise en page causés par des polices de chargement tardif, conduisant à une expérience utilisateur plus douce.
La propriété CSS Font-Display aborde directement les problèmes de Foit et Fout. En permettant aux développeurs de contrôler le comportement de chargement des polices, il peut empêcher le texte de devenir invisible ou non style pendant le processus de chargement. Par exemple, la définition de la propriété de dispositif de police sur «échanger» peut éliminer le POIT en affichant immédiatement le texte avec une police de secours.
Certaines meilleures pratiques pour l'utilisation de la propriété CSS-Display incluent le choix de la bonne valeur en fonction de vos besoins et le test du comportement de chargement sur différents navigateurs et conditions de réseau. Il est également recommandé d'utiliser une police de secours qui correspond étroitement aux métriques de la police personnalisée pour minimiser les changements de mise en page.
Oui, vous pouvez utiliser la propriété CSS Font-Display avec des polices Web hébergées sur des services tiers. Cependant, il est important de noter que tous les services ne prennent pas en charge cette fonctionnalité. Vous devriez vérifier la documentation ou contacter le fournisseur de services pour plus d'informations.
Un inconvénient potentiel de l'utilisation de la police CSS- La propriété d'affichage est qu'il n'est pas entièrement pris en charge dans tous les navigateurs. Par exemple, Internet Explorer et certaines versions plus anciennes d'autres navigateurs ne prennent pas en charge cette fonctionnalité. De plus, la valeur «facultative» peut entraîner la sauté entièrement de la police personnalisée dans certains cas, ce qui pourrait affecter la cohérence visuelle de votre site Web.
La propriété CSS-Display n'est qu'un outil d'une stratégie complète de performance Web. Bien qu'il puisse aider à améliorer la vitesse de chargement perçue et à empêcher les changements de disposition, il doit être utilisé en conjonction avec d'autres techniques d'optimisation des performances, telles que la minimisation de la taille de vos fichiers CSS et JavaScript, l'optimisation des images et l'utilisation d'un réseau de livraison de contenu (CDN) .
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Principales utilisations du système d'exploitation Linux
Pièces sous-évaluées à thésauriser en 2024
Méthode de réparation des erreurs Kernelutil.dll
Introduction aux fonctions d'ordre supérieur de Python
Comment définir les deux extrémités pour qu'elles soient alignées en CSS
gestionnaire de démarrage de Windows
Combien de temps faut-il pour que la recharge Douyin arrive ?
Explication détaillée de l'utilisation de la commande netsh
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
