Affichez rapidement un texte de remplacement lorsque les lecteurs ont besoin de lire le contenu d’une page. Choisissez le masquage temporaire uniquement pour un petit élément dépendant d’une police, lorsque cela se justifie. Pour une page que vous gérez sur Mac, ce guide explique comment choisir une politique et tester son effet sur le flux du texte.

Que se passe-t-il réellement pendant le chargement d’une police ?

Une police de remplacement affiche le même texte dans une autre police de caractères tant que la police demandée n’est pas disponible. Le texte temporairement masqué correspond à la période de blocage du chargement de la police : le navigateur met en page une police de remplacement invisible. La chronologie du chargement commence lorsque le navigateur tente pour la première fois d’utiliser la police téléchargeable. La référence de MDN sur font-display explique ces étapes.

Cette distinction compte lors de l’examen d’une page. Un titre vide ne prouve pas que ses dimensions finales ont été réservées. Pendant la période de blocage, le navigateur utilise toujours la mise en page de la police de remplacement ; masquer les lettres ne permet pas de connaître les retours à la ligne définitifs de la police téléchargée. Évaluez séparément la visibilité et la stabilité de la mise en page.

Le réglage pertinent est le descripteur font-display dans une règle @font-face. Il appartient à la définition de la face de police, et non à un sélecteur de paragraphe ordinaire. C’est un choix lié à la création de la page : utilisez la feuille de style ou les paramètres de police disponibles pour la page que vous gérez. MDN indique où s’applique font-display.

Quelle valeur de font-display convient à la tâche du lecteur ?

Avant toute modification, déterminez deux choses : les mots doivent-ils apparaître rapidement dans une autre police, et leur remplacement ultérieur est-il acceptable ? Le tableau suivant traduit les périodes de chargement documentées en choix pour une page publique fictive. Les définitions des valeurs par MDN décrivent le comportement sous-jacent.

Valeur Tant que la face n’est pas disponible Possibilité de remplacer la police de remplacement Point de départ approprié
swap Blocage extrêmement bref, puis police de remplacement visible Période de remplacement illimitée Un titre court dont la police prévue est importante
fallback Blocage extrêmement bref, puis police de remplacement visible Courte période de remplacement Texte de lecture pour lequel un changement précoce est acceptable
optional Blocage extrêmement bref Aucune période de remplacement Texte pour lequel conserver la première police visible est prioritaire
block Police de remplacement invisible pendant une courte période de blocage, puis visible Période de remplacement illimitée Un petit élément qui dépend d’une police précise
auto Politique choisie par le navigateur Politique choisie par le navigateur Accepter le comportement par défaut du navigateur

Il s’agit de catégories de politiques, et non de délais exacts que vous pouvez configurer. Le projet actuel du niveau 4 des polices CSS du W3C recommande des durées typiques, tout en autorisant explicitement des variations selon le navigateur. Il réserve également block aux petits fragments de texte dont la police particulière est nécessaire à l’ergonomie. La seule préférence esthétique pour un titre justifie mal de le laisser vide. W3C : contrôler l’affichage des polices par face.

Pour une page fictive comportant un titre nommé « Sample Collection », une navigation nommée « Section One » et plusieurs paragraphes, commencez par envisager fallback pour le texte de lecture. Envisagez swap pour le titre court si l’utilisation ultérieure de sa police de caractères est importante. Choisissez optional lorsque la priorité est de conserver le premier rendu visible. Ces recommandations appliquent les politiques documentées à la tâche du lecteur ; elles ne constituent pas des résultats mesurés.

Utiliser un outil d’aide à la décision sur la visibilité et les changements de mise en page

Évaluez séparément chaque rôle du texte. Une étiquette de navigation et un paragraphe peuvent utiliser la même famille de polices, mais leurs contraintes de mise en page diffèrent. La question utile est de savoir si un changement de police empêche quelqu’un de poursuivre sa tâche ou s’il modifie seulement l’apparence.

  1. Lisez la page avec sa police de remplacement. Peut-on comprendre « Section One », repérer le titre et lire les paragraphes ? Si oui, une police de remplacement visible constitue un bon point de départ.
  2. Observez le remplacement de la police. Le titre passe-t-il sur une ligne supplémentaire ? Les étiquettes reviennent-elles à la ligne ? Le paragraphe suivant se déplace-t-il ?
  3. Choisissez le délai de remplacement acceptable. Utilisez swap si un remplacement tardif reste acceptable, fallback si seul un remplacement précoce est souhaitable, ou optional si la première police visible doit être conservée.
  4. Exigez une raison concrète pour masquer le texte. Avant de choisir block, déterminez ce qui deviendrait inutilisable avec la police de remplacement et pourquoi cette dépendance ne peut pas être supprimée.

Par exemple, supposons que « Sample Collection » tienne sur une ligne avec la police de remplacement et sur deux lignes avec la police téléchargée. Si la hauteur de ligne du titre est hypothétiquement de 40 pixels, la ligne supplémentaire ajoute 40 pixels à sa hauteur, en supposant que l’espacement reste inchangé. Le contenu situé en dessous peut se déplacer en conséquence. Il s’agit de données d’illustration, et non de mesures du navigateur.

Le masquage temporaire ne résout pas cette différence. Les choix pratiques consistent à mieux assortir la police de remplacement, à ajuster la mise en page après l’avoir testée, ou à sélectionner une politique qui évite un remplacement tardif. Selon le comportement optional du projet actuel du W3C, une fois le texte de remplacement affiché, la police facultative ne doit pas le remplacer pendant la durée de vie de cette page. Définition de optional par le W3C.

Appliquer et tester le choix sur Mac

Utilisez une page dont vous pouvez modifier la feuille de style et dont la police web existante se charge déjà correctement. Conservez la référence à son fichier de police réel ; aucun nouveau téléchargement de police ni aucune ressource de remplacement n’est nécessaire pour cette comparaison.

Trouvez la déclaration @font-face pertinente dans la feuille de style source de la page ou dans la configuration de polices prise en charge. Attribuez au descripteur font-display la valeur candidate, par exemple font-display: fallback;. Examinez les autres déclarations utilisées pour les graisses et les styles afin que le test couvre les faces réellement demandées par la page. L’exemple de font-display par MDN montre où placer le descripteur.

Dans Chrome sur votre Mac, appuyez sur Command + Option + I pour ouvrir les DevTools. Vous pouvez aussi cliquer avec le bouton droit sur le texte cible et choisir Inspecter ; le panneau Elements affiche le CSS appliqué dans Styles. Les instructions d’ouverture des DevTools de Chrome décrivent les deux méthodes.

Effectuez la comparaison suivante après chaque modification de la feuille de style. Gardez la même largeur de fenêtre et le même zoom afin de pouvoir attribuer les différences à la politique de chargement des polices.

  1. Ouvrez Network, activez Disable cache, sélectionnez un préréglage plus lent dans le menu Throttling, puis rechargez la page. Utilisez le filtre Font pour vous concentrer sur les requêtes de polices.
  2. Observez le titre, la navigation et le début du paragraphe. Notez si le texte est d’abord vide, s’il apparaît avec la police de remplacement et si ses retours à la ligne changent ensuite.
  3. Si la transition est trop rapide pour être examinée, activez Capture screenshots dans les paramètres du panneau Network, puis rechargez la page pour inspecter la séquence de chargement.
  4. Désactivez la limitation du débit et décochez Disable cache. Rechargez de nouveau pour comparer avec une visite répétée dans des conditions normales. La référence de Chrome aux fonctionnalités du panneau Network décrit ces commandes.

Testez séparément le cas où la police est indisponible. Dans Network, cliquez avec le bouton droit sur la requête de police réelle et choisissez Block request, puis rechargez la page. Chrome affiche le motif correspondant dans Request conditions. Vérifiez que le texte devient lisible et que la page reste utilisable avec la police de remplacement. Supprimez ou désactivez ensuite le motif de test. La documentation Chrome sur les conditions de requête explique le blocage des requêtes et comment repérer celles qui sont bloquées.

Examinez également la page dans Safari s’il fait partie de votre environnement de navigation Mac prévu. Considérez le test Chrome comme une indication du rendu dans ce navigateur, et non comme la preuve d’un minutage identique ailleurs : la spécification autorise des différences entre navigateurs. Conservez une brève note de comparaison indiquant le navigateur, la valeur candidate, la visibilité initiale et les retours à la ligne observés.

Que faire si la police de remplacement visible modifie trop la mise en page ?

Commencez par examiner le texte réel et la largeur disponible. Comparez les courtes étiquettes, le titre le plus long et plusieurs lignes de paragraphe. Une police de remplacement qui ressemble visuellement à la police web peut tout de même avoir des avances de caractères différentes et produire d’autres retours à la ligne.

Pour obtenir une correspondance plus étroite, size-adjust met à l’échelle les contours et les métriques des glyphes d’une face, y compris leurs avances. MDN montre comment définir une face de police de remplacement locale et l’ajuster pour mieux correspondre à une police web principale. Déterminez le pourcentage adapté à votre paire réelle ; le pourcentage d’un exemple de documentation n’est pas une valeur universelle. MDN : size-adjust.

Les métriques verticales nécessitent une vérification distincte. Le descripteur ascent-override contrôle la métrique au-dessus de la ligne de base utilisée pour mettre en page les boîtes de ligne, mais MDN indique actuellement que sa disponibilité est limitée. Considérez cet ajustement comme une amélioration et conservez une mise en page lisible avec la police de remplacement dans les navigateurs qui ne le prennent pas en charge. MDN : ascent-override.

Laissez le navigateur gérer la mise en forme du texte. N’essayez pas de stabiliser un titre en remplaçant ou en mesurant chaque caractère séparément. La correspondance des polices CSS traite spécialement les groupes de graphèmes, par exemple un caractère de base accompagné d’un signe combinatoire. Examinez des étiquettes et des lignes complètes dans leur mise en page réelle. W3C : correspondance des groupes.

Le préchargement ou une bibliothèque de chargement des polices change-t-il la décision ?

Le préchargement agit sur la découverte des ressources. La norme HTML du WHATWG définit preload comme la récupération et la mise en cache anticipées d’une ressource attendue pour la navigation en cours. Cela ne détermine pas votre politique font-display. Envisagez le préchargement seulement après avoir choisi le comportement visible acceptable ; une récupération anticipée ne remplace pas la décision sur ce qui se passe lorsque la face n’est toujours pas disponible. WHATWG : type de lien preload.

Pour le texte ordinaire d’une page, commencez par CSS. Si un projet existant utilise Font Face Observer, sa méthode documentée load() renvoie une promesse qui est résolue lorsque la police se charge et rejetée en cas d’échec. Le nom de sa famille de polices et les descriptions facultatives de graisse, de style et de chasse doivent correspondre à la face demandée. La bibliothèque explique également comment fournir un texte de test adapté lorsque les caractères par défaut sont absents de la police. Documentation de Font Face Observer.

Un rappel réussi de la bibliothèque signale le chargement ; c’est toujours votre application qui détermine ce qui devient visible. Si une logique personnalisée masque le texte, prévoyez un mécanisme d’échec qui rétablit une police de remplacement lisible. Sinon, un échec de chargement peut laisser active la règle de masquage de l’application. Cette recommandation d’implémentation découle des chemins de réussite et d’échec documentés par la bibliothèque.

L’API native présente une limite similaire. document.fonts.ready est satisfaite une fois terminées les opérations de chargement et de mise en page des polices utilisées ; cet ensemble peut différer de celui de toutes les polices déclarées, y compris les faces facultatives qui n’ont pas pu être utilisées à temps. Cela ne prouve donc pas que toutes les faces prévues sont visibles. MDN : propriété fonts de Document.

De même, l’argument textuel facultatif de document.fonts.load() sélectionne les faces correspondantes par leurs plages Unicode ; il ne vérifie pas la couverture de chaque glyphe. La fin du chargement et le rendu correct de l’échantillon complet restent deux vérifications distinctes. MDN : méthode load() de FontFaceSet.

Choisissez la politique en examinant les versions à chargement lent, sans police disponible et à chargement répété de la même page. Gardez les mots ordinaires lisibles, décidez explicitement si un remplacement tardif est acceptable et n’acceptez le masquage temporaire que lorsqu’un petit élément présente une dépendance avérée à une police. Le résultat doit permettre de lire « Sample Collection » confortablement dans chacune des conditions testées.

Sources