web-dev-qa-db-fra.com

@ font-face ne fonctionne pas avec une version spécifique d'Internet Explorer 11

Je sais qu'il y a beaucoup de questions similaires, mais cette situation semble vraiment étrange. @ font-face semble être cassé pour Internet Explorer 11 (Windows 7 Pro). Plus précisément, Version: 11.0.9600.17728, Version de mise à jour: 11.0.18.

@ font-face fonctionne bien pour moi sur Chrome, Firefox, Safari, Opera (Linux et Windows, le cas échéant). En fait, cela fonctionne même sur Internet Explorer Version: 11.0.9600.17633, Version de mise à jour: 11.0.16, fonctionnant également sous Windows 7 sur un autre ordinateur que j'ai.

Rien dans la console du développeur n'indique qu'il y a un problème pour extraire les polices. J'ai simplifié mon html/css à quelques éléments très simples pour reproduire le problème. Dans le cas ci-dessous, aucune des polices personnalisées ne fonctionne (pour cette version spécifique IE):

<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>

... et le 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;
}

Vous pouvez trouver que le code fonctionne ici .
Si je visualise cette page avec la version de IE à l'origine de problèmes, la police du texte sera celle par défaut et à la place des icônes, vous ne verrez que les lettres des balises span. 

Étant donné que @ font-face fonctionne dans tous les autres navigateurs que j'ai testés (même une version différente de IE 11), cela pourrait-il être un bogue avec cette version d'IE, et y a-t-il quelque chose que je puisse faire pour corriger ce problème? ou déboguer plus loin?

htmlcssinternet-explorerfont-face
18
RTF

Cela pourrait être lié à un problème avec les paramètres de sécurité, comme décrit dans ce rapport bug .

Dans les options Internet, allez à:

  • L'onglet Sécurité
  • Niveau de sécurité pour cette zone
  • Niveau personnalisé
  • Téléchargements
  • Téléchargement de polices

Si elle est désactivée, vous devez l'activer.

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

Si le problème est "@ font-face ne fonctionne pas avec une version spécifique d'Internet Explorer 11"

Vérifiez si votre compatibilité avec les polices est: Installable  enter image description here

Si ce n'est pas incorporable: Installable ajouter une police installable alors cela fonctionnera parfaitement.

2
Thilina Dharmasena

Le problème peut être lié à l'utilisation de HTTPS sur des versions spécifiques d'Internet Explorer. J'ai constaté que Version 11.0.9600.19035, mise à jour version 11.0.65 s'exécutant sur Windows 7 est également concerné. 

Même si Google déclare prendre en charge Microsoft Internet Explorer version 6+, leurs polices sont affectées de la même manière que celle décrite ci-dessus.

Servir la police via HTTP apportera un avertissement "contenu mixte". Après avoir accepté l'avertissement, la police s'affiche sur les IE affectés, mais PAS sur ceux qui ne le sont pas.

Actuellement, je ne connais aucune solution de contournement, pas même un moyen de détecter les versions affectées via HTML/CSS/JavaScript.

0
jofeu

Correction en supprimant l'en-tête "Vary" pour les fichiers "eot" au niveau Apache

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