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

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

Barbara Streisand
Libérer: 2024-12-03 11:43:11
original
396 Les gens l'ont consulté

Why Does Roboto Slab in Google Fonts Fail to Render in Chrome, and How Can I Fix It?

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; }
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal