Pourquoi ma règle @font-face n'affiche-t-elle pas les polices dans IE9 ?

Problèmes d'affichage @font-face dans IE9

Vous rencontrez des problèmes avec la règle @font-face qui n'affiche pas les polices dans Internet Explorer 9 (IE9), même s'ils fonctionnent dans d'autres navigateurs, dont IE8. De plus, les polices sont visibles lorsqu'elles sont consultées localement, mais pas lorsque le site Web est hébergé en direct.

Le site Web en question est bigwavedesign.co.uk/gcc/gcc/, et le code CSS utilisé pour la @font La règle -face est :

<code class="css">@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;
}</code>

Apparemment, ce problème ne semble pas être un cas isolé, car d'autres ont signalé des problèmes similaires. La principale différence entre IE9 et les autres navigateurs est qu'IE9 semble utiliser la version .woff de la police au lieu de la version .eot utilisée par les autres navigateurs. Cela a conduit à une solution dans laquelle la version .woff a été incluse dans le projet, ce qui a permis à la police de fonctionner correctement dans toutes les versions d'IE.

La règle @font-face modifiée suivante inclut la version .woff et est signalée à résoudre le problème :

<code class="css">@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");
  }</code>

En incluant la version .woff dans la règle @font-face, il est possible de garantir que la police s'affiche correctement dans IE9 tout en conservant la compatibilité avec les autres navigateurs.

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!