web-dev-qa-db-fra.com

IE9 - CSS3111: @ font-face a rencontré une erreur inconnue

J'incorpore trois polices Google de http://www.google.com/webfonts (Dosis, Open Sans, Lato)

Et ils fonctionnent tous bien sauf IE9 où il revient:

CSS3111: @font-face encountered unknown error. 
2HG_tEPiQ4Z6795cGfdivPY6323mHUZFJMgTvxaG2iE.eot

CSS3111: @font-face encountered unknown error. 
KlmP_Vc2zOZBldw8AfXD5g.eot

CSS3111: @font-face encountered unknown error. 
zLhfkPOm_5ykmdm-wXaiuw.eot

Et casse tout le site Web de temps en temps.

Que peut-on faire pour résoudre ce problème?

internet-explorercss3fontsgoogle-webfonts
30
Atadj

J'ai trouvé cette réponse, qui répond à la question plus directement que la réponse acceptée, qui n'aurait vraiment pas dû être la réponse :)

Et maintenant à notre point culminant principal - le "CSS3111: @ font-face a rencontré une erreur inconnue". Cette erreur est très ambiguë. Si vous examinez à nouveau MSDN, vous verrez que sa description indique: "Un problème inconnu a été rencontré avec le" Web Open Font Format (WOFF) "et" Embedded OpenType font (EOT) "des feuilles de style en cascade ( CSS) ". "Problème inconnu" ne me semble pas trop bon - comment suis-je censé résoudre un problème inconnu? Heureusement, on nous donne un indice ici. Il dit: "Vérifier la source des polices". En effet, CSS3111 est généralement causé par un problème avec la source binaire de la police. Par exemple, l'un des convertisseurs TTF en EOT les plus populaires en ligne produit des fichiers EOT avec une table NAME non conforme aux normes Microsoft, ce qui entraîne des polices EOT qui ne se chargent jamais en IE et produisent le Erreur CSS3111. Ainsi, lorsque vous rencontrez un CSS3111, il est toujours bon d'essayer d'utiliser un convertisseur TTF en EOT ou un générateur de police de caractères différent.

Source: http://www.marinbezhanov.com/web-development/16/how-to-embed-webfonts-properly-and-how-to-solve-the-ambiguous-css3111-font-face- erreur inconnue rencontrée /

25
Victor S

J'ai résolu le problème sur IE 9 en utilisant le @font-face Ci-dessous:

@font-face {
    font-family: Gidole;
    src: url('Gidole-Regular.woff2') format('woff2'),
         url('Gidole-Regular.woff') format('woff');
}
3
KAD

Nous avons constaté que vous obtenez la même erreur en raison d'une nouvelle stratégie Windows 10. Si votre erreur se produit sur Windows 10 + IE11, la solution peut être la suivante:

IE 11: erreur CSS3111 dans mon propre code, et google.com/fonts ne rend aucune police

2
malamirada

Commentant la deuxième déclaration source pour la police EOT a fonctionné pour moi. Assurez-vous d'avoir la 1ère déclaration juste au-dessus de "src: url (" ../ fonts/webfonts/Helvetica Neue.eot ");"

Testé sur Chrome, Firefox, Sarafi, IE9-10-11.

@font-face {
  font-family: 'Helvetica Neue';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/webfonts/Helvetica Neue.eot");
  src: local("Helvetica Neue"), local("Helvetica Neue"),
    /*url("../fonts/webfonts/Helvetica Neue.eot?#iefix") format("embedded-opentype"),*/
    url("../fonts/webfonts/Helvetica Neue.woff2") format("woff2"),
    url("../fonts/webfonts/Helvetica Neue.woff") format("woff"),
    url("../fonts/webfonts/Helvetica Neue.ttf") format("truetype"),
    url("../fonts/webfonts/Helvetica Neue.svg") format("svg"); }
1
Leo Leoncio

Cette erreur peut également se produire lorsque vous utilisez desubroutinize polices d, qu'aucune version d'Internet Explorer ne semble pouvoir gérer.

Si vous générez vos fichiers de police à l'aide de pyftsubset à partir du package fonttools , assurez-vous que vous pas définissez le --desubroutinize drapeau.

0
Lukas Schmelzeisen

j'espère que la note suivante vous sera utile:

Si vos polices se trouvent sur un serveur distant (un CDN par exemple), elles ne s'afficheront pas correctement dans tous les navigateurs. Ce n'est que partiellement vrai. Oui, sans en-tête "Access-Control-Allow-Origin" explicite, Firefox et Internet Explorer n'afficheront pas vos polices Web (si vous appuyez sur F12 pour ouvrir les outils de développement dans IE et accédez à l'onglet Console, vous obtiendrez la CSS3117: @ échec de la demande cross-Origin de font-face. L'accès aux ressources est restreint. erreur) C'est tout simplement parce que IE et Firefox n'autorisent pas les polices interdomaines par défaut. D'autre part, Google Chrome chargera les polices sans problème et si vous n'êtes pas au courant du problème d'origine croisée, le débogage peut devenir très frustrant. Bien que je préfère personnellement pour placer mes polices sur le même domaine également, vous pouvez toujours les placer sur un emplacement distant et les charger correctement dans tous les navigateurs, tant que vous ajoutez cette déclaration à votre fichier .htaccess principal:

<FilesMatch "\.(ttf|otf|eot|woff)$">
      <IfModule mod_headers.c>
          Header set Access-Control-Allow-Origin http://mydomain.com"
      </IfModule>
</FilesMatch>

Voir la référence

0
Ahsan Khurshid