Pourquoi Roboto Slab dans Google Fonts ne parvient-il pas à s'afficher dans Chrome et comment puis-je y remédier ?

Dépannage des problèmes de rendu des polices Google dans Chrome

Il n'est pas rare de rencontrer des difficultés de rendu lors de l'utilisation des polices Google dans le développement Web. Un problème spécifique survenu récemment affecte les sites Web utilisant Roboto Slab dans Chrome. Bien que la police apparaisse comme prévu dans d'autres navigateurs, elle reste invisible lors du chargement initial de la page dans Chrome.

Après enquête, il semble qu'il s'agisse d'un bug connu dans Chrome. La cause du problème est que Chrome peut parfois ne pas afficher correctement les polices personnalisées lors du chargement initial de la page. Cependant, une fois qu'une propriété CSS est redéclenchée (par exemple, en survolant un lien stylisé), la police devient visible.

Pour résoudre ce problème, une solution de contournement a été développée qui repose uniquement sur CSS. En ajoutant le code suivant à votre feuille de style, vous pouvez vous assurer que Chrome restitue correctement la police :

body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

Cette solution de contournement oblige essentiellement Chrome à repeindre le texte, résolvant ainsi le problème. Il convient de noter qu’il s’agit d’une solution uniquement CSS et qu’elle peut ne pas convenir à toutes les situations. Néanmoins, il constitue un moyen efficace de résoudre le problème de rendu des polices Google dans Chrome.

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!