Warum funktioniert mein @font-face im IE9 auf einer Live-Site nicht?

Debuggen von @font-face-Problemen in IE9

Obwohl @font-face reibungslos in IE8 und anderen Browsern funktioniert, stößt @font-face in IE9 auf Anzeigeschwierigkeiten. Dieses Problem tritt speziell auf der Live-Site auf, während die lokale Anzeige auf dem Computer des Benutzers keine Probleme bereitet.

Der betreffende CSS-Code ist:

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

Ein ähnliches Problem wurde gemeldet , wobei die Schriftart in allen IE-Versionen außer IE9 funktioniert. Durch Ändern des Dokumentmodus (über die F12-Entwicklertools) wird das Problem jedoch behoben, wenn auch nicht ideal.

Update:

Untersuchungen haben ergeben, dass IE9 die .woff-Datei verwendet Schriftartvariation anstelle der beabsichtigten .eot-Version. Durch die Einbeziehung der vollständigen Schriftartenvariationen, die vom Fontsquirrel @font-face-Generator generiert wurden, und unter Verwendung der Smileyface-Local-Technik wurde das Problem behoben:

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

h1 { font-family: "LucidaFax-bold", serif;}

Zusätzlich wurde der Mark „Tarquin“ Wilton-Jones-Text- Shadow Hack wurde eingesetzt, um ein einheitliches visuelles Design über alle IE-Versionen hinweg zu erreichen.

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein @font-face im IE9 auf einer Live-Site nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!