Warum funktioniert mein @font-face in allen Browsern außer IE9?

@font-face-Rätsel: Anzeigeprobleme in IE9 beim Betrieb in anderen Browsern

In einem merkwürdigen Fall von Web-Typografie-Störungen, ein Benutzer ist bei @font-face auf eine Anomalie gestoßen. Die betreffende Schriftart wird in jedem Browser außer IE9 perfekt gerendert, was den Benutzer verwirrt. Darüber hinaus erscheint die Schriftart aus unerklärlichen Gründen auf der lokalen Version der Website, verschwindet jedoch, wenn sie live bereitgestellt wird.

Die betreffende Website, bigwavedesign.co.uk/gcc/gcc/, verwendet die folgende @font-face-Deklaration:

    @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;
}

Diese Anomalie hat den Benutzer verwirrt und ihn dazu veranlasst, mögliche Ursachen zu untersuchen. Überraschenderweise stellten sie fest, dass es einer anderen Website, iamthomasbishop.com, gelang, dieselbe Schriftart im IE9 erfolgreich darzustellen. Es bleibt ein Rätsel, wie dieser Website dieses Kunststück gelungen ist.

Letztendlich wurde vermutet, dass das Problem auf die Bevorzugung der .woff-Schriftartversion durch IE9 gegenüber der .eot-Version zurückzuführen ist. Das Problem konnte durch die Einbindung aller Schriftartvarianten in das Projekt mithilfe der Unterroutine „smileyface-local“ behoben werden. Der aktualisierte Code funktioniert jetzt nahtlos in allen IE-Versionen:

@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");
  }

Damit wurde das Geheimnis der fehlenden Schriftart in IE9 gelüftet und zeigt, wie wichtig es ist, browserspezifische Besonderheiten im Webdesign zu berücksichtigen und welche Leistungsfähigkeit diese hat kollaborative Problemlösung bei der Bewältigung technischer Herausforderungen.

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein @font-face in allen Browsern außer IE9?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!