wake-up-neo.com

@ font-face funktioniert nicht mit bestimmten Versionen von Internet Explorer 11

Ich weiß, dass es viele ähnliche Fragen gibt, aber diese Situation erscheint sehr seltsam. @ font-face scheint für Internet Explorer 11 (Windows 7 Pro) defekt zu sein. Insbesondere Version: 11.0.9600.17728, Aktualisierungsversion: 11.0.18.

@ font-face funktioniert gut für mich unter Chrome, Firefox, Safari, Opera (sowohl Linux als auch Windows, sofern zutreffend). Tatsächlich funktioniert es sogar mit der Internet Explorer-Version: 11.0.9600.17633, Update-Version: 11.0.16, die auch unter Windows 7 auf einem anderen Computer ausgeführt wird.

Die Entwicklerkonsole weist nichts darauf hin, dass beim Abrufen der Schriftarten Probleme auftreten. Ich habe mein HTML/CSS auf einige grundlegende Dinge reduziert, um das Problem zu reproduzieren. Im folgenden Fall funktionieren keine der benutzerdefinierten Schriftarten (für diese bestimmte IE - Version):

<html>
<head>
    <link rel="stylesheet" type="text/css" href="test.css" />
</head>   
<body>      
    <p>This font should be Roboto Thin</p>
    <p>There should be icons below. If not, then font-face is not working.</p>
    <span>a</span>
    <span>b</span>
    <span>c</span>
    <span>d</span>
    <span>e</span>
    <span>f</span>
    <span>g</span>
    <span>h</span>
    <span>i</span>
    <span>j</span>
    <span>k</span>
    <span>l</span>
    <span>m</span>   
</body>
</html>

... und das CSS:

@charset "UTF-8";

@font-face {
    font-family: 'robotothin';
    src: url('roboto-thin-webfont.eot');
    src: url('roboto-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('roboto-thin-webfont.woff') format('woff'),
         url('roboto-thin-webfont.ttf') format('truetype'),
         url('roboto-thin-webfont.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face { 
    font-family: 'typicons'; 
    src: url('typicons-regular-webfont.ttf'); 
}

p {
    font-family: robotothin;
    font-size: 26px;
    color: #666;
}

span {
    font-family: typicons;
    font-size: 30px;
    color: #0062A8;
}

Sie finden diesen Code hier .
Wenn ich diese Seite mit der Version von IE zeige, die Probleme verursacht, wird die Textschriftart als Standard verwendet, und anstelle von Symbolen werden nur die Buchstaben in den span-Tags angezeigt. 

Da @ font-face in jedem anderen Browser funktioniert, den ich bereits getestet habe (sogar eine andere Version von IE 11), handelt es sich wahrscheinlich um einen Fehler in dieser IE-Version. Gibt es etwas, was ich beheben kann? oder weiter debuggen?

18
RTF

Dies könnte ein Problem mit den Sicherheitseinstellungen sein, das in diesem Fehlerbericht beschrieben ist.

In den Internetoptionen gehen Sie zu:

  • Die Registerkarte "Sicherheit"
  • Sicherheitsstufe für diese Zone
  • Benutzerdefinierte Ebene
  • Downloads
  • Schrift herunterladen

Wenn es deaktiviert ist, müssen Sie es aktivieren.

 Screenshot of the Internet Options window. The Security tab is selected and the "Custom level..." button has a red box around it.

 Screenshot of the Security Settings window. Font download's "Enable" option has a red box around it.

12
BSMP

Bei dem Problem "@ font-face funktioniert nicht mit einer bestimmten Version von Internet Explorer 11"

Prüfen Sie, ob Ihre Schriftart eingebettet werden kann: Installierbar  enter image description here

Wenn es nicht eingebettet werden kann: Installable add installable font, dann funktioniert es einwandfrei.

2

Das Problem kann mit der Verwendung von HTTPS in bestimmten Versionen von Internet Explorer zusammenhängen. Ich habe festgestellt, dass Version 11.0.9600.19035, Update-Version 11.0.65 unter Windows 7 ausgeführt wird. 

Obwohl Google die Unterstützung für Microsoft Internet Explorer ab Version 6 angibt, sind die Schriftarten auf die gleiche Weise wie oben beschrieben betroffen.

Wenn Sie die Schriftart über HTTP bereitstellen, wird eine Warnung zum "gemischten Inhalt" angezeigt. Nach dem Akzeptieren der Warnung wird die Schrift auf den betroffenen IEs angezeigt, NICHT auf den nicht betroffenen.

Derzeit kenne ich keine Problemumgehung, auch nicht die Möglichkeit, betroffene Versionen über HTML/CSS/JavaScript zu erkennen.

0
jofeu

Dieses Problem wurde behoben, indem der Header "Vary" für die "eot" -Dateien auf Apache-Ebene entfernt wurde

<Location ~ \.eot$>
  Header unset Vary
</Location>
0