Maison > interface Web > tutoriel CSS > Pourquoi ma @font-face fonctionne-t-elle dans tous les navigateurs à l'exception d'IE9 ?

Pourquoi ma @font-face fonctionne-t-elle dans tous les navigateurs à l'exception d'IE9 ?

Susan Sarandon
Libérer: 2024-11-02 00:14:02
original
507 Les gens l'ont consulté

Why Does My @font-face Work in All Browsers Except for IE9?

Énigme @font-face : problèmes d'affichage dans IE9 lors du fonctionnement dans d'autres navigateurs

Dans un cas curieux de problèmes de typographie Web, un utilisateur a rencontré une anomalie avec @font-face. La police en question s'affiche parfaitement dans tous les navigateurs à l'exception d'IE9, laissant l'utilisateur perplexe. De plus, la police apparaît inexplicablement sur la version locale du site Web mais disparaît lorsqu'elle est déployée en direct.

Le site Web en question, bigwavedesign.co.uk/gcc/gcc/, utilise la déclaration @font-face suivante :

    @font-face {
                font-family: 'LeagueGothicRegular';
                src: url('league_gothic_0-webfont.eot');
                src: local('League Gothic Regular'), url('league_gothic_0-webfont.woff') format('woff'), url('league_gothic_0-webfont.ttf') format('truetype'), url('league_gothic_0-webfont.svg#webfonta36nFpyE') format('svg');font-weight: normal;font-style: normal;
}
Copier après la connexion

Cette anomalie a rendu l'utilisateur perplexe, l'incitant à rechercher les causes potentielles. Dans une découverte surprenante, ils ont remarqué qu'un autre site Web, iamthomasbishop.com, avait réussi à restituer la même police avec succès dans IE9. Déterminer comment ce site a réalisé cet exploit reste un casse-tête.

En fin de compte, on soupçonnait que le problème provenait de la préférence d'IE9 pour la version de police .woff par rapport à la version .eot. L'intégration de la gamme complète de variantes de polices dans le projet à l'aide du sous-programme smileyface-local a résolu le problème. Le code mis à jour fonctionne désormais de manière transparente dans toutes les versions d'IE :

@font-face {
  font-family: "LucidaFax-bold";
  src: url("_font/LucidaFax-bold.eot");
  src: local("☺"),
  url("_font/LucidaFax-bold.woff") format("woff"),
  url("_font/LucidaFax-bold.ttf") format("truetype"),
  url("_font/LucidaFax-bold.svg#LucidaFax-bold") format("svg");
  }
Copier après la connexion

Ainsi, le mystère de la police manquante dans IE9 a été résolu, démontrant l'importance de prendre en compte les bizarreries spécifiques au navigateur dans la conception Web et la puissance de résolution collaborative de problèmes pour surmonter les défis techniques.

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