IE9 - CSS3111: @font-face erreur inconnue
j'ai intégré trois polices Google de http://www.google.com/webfonts (Dosis, Open Sans, Lato)
et ils travaillent tous bien sauf IE9 où il retourne:
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 le site web entier de temps en temps.
que peut-on faire pour résoudre ce problème?
6 réponses
j'ai trouvé cette réponse, qui répond à la question plus directement que la réponse acceptée, qui en réalité, n'aurait pas dû être la réponse:)
et maintenant à notre principal point culminant - le " CSS3111: @font-face rencontré erreur inconnue". Cette erreur est très ambiguë. Si vous avez un coup d'oeil à MSDN encore une fois, vous verrez sa description dit: "un problème inconnu a été rencontré avec le " Web Open Font Format (WOFF)", et " intégré Police OpenType (EOT)" de les Feuilles de Style en Cascade (CSS) de la police". "Problème inconnu" ne sonne pas trop bien pour moi - comment suis-je censé résoudre un problème inconnu? Heureusement que nous sommes donné 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. L'un des populaires en ligne TTF to EOT converters par exemple produit des fichiers EOT avec une table de noms cela n'est pas conforme aux normes Microsoft, ce qui se traduit par EOT des polices qui ne se chargent jamais dans IE et produire l'erreur CSS3111. Donc, quand vous rencontrez un CSS3111, il est toujours bon d'essayer d'utiliser un autre TTF to EOT converter ou font face generator.
j'ai résolu le problème sur IE 9 en utilisant le ci-dessous @font-face :
@font-face {
font-family: Gidole;
src: url('Gidole-Regular.woff2') format('woff2'),
url('Gidole-Regular.woff') format('woff');
}
nous avons trouvé que vous obtenez la même erreur en raison d'une nouvelle politique Windows 10. Si votre erreur se produit sur Windows 10 + IE11, la solution peut être:
IE 11: erreur CSS3111 dans mon propre code, et google.com/fonts ne rend pas les polices
commentant la 2ème déclaration de source pour la police EOT a fonctionné pour moi. Assurez-vous que vous 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"); }
espérons que la note suivante vous sera utile:
si vos polices sont situées sur un serveur distant (un CDN par exemple), elles ne seront pas rendues correctement dans tous les navigateurs. C'est que partiellement vrai. Oui, sans en-tête explicite "Access-Control-Allow-Origin", Firefox et Internet Explorer n'afficheront pas vos webfonts (si vous appuyez sur F12 pour ouvrir les outils de développement dans IE et allez à L'onglet Console, vous obtiendrez le css3117: @font-face failed demande d'origine croisée. L'accès aux ressources est limité. erreur) c'est simplement parce que IE et Firefox n'autorisent pas les polices de domaine croisées par défaut. D'un autre côté, Google Chrome chargera les polices sans problème et si vous n'êtes pas au courant de la question de l'origine croisée, le débogage peut devenir vraiment frustrant. Bien que personnellement je préfère placer mes polices sur le même domaine aussi, vous pouvez toujours les placer sur un emplacement distant et les faire charger avec succès dans tous les navigateurs, aussi longtemps que vous ajoutez ceci déclaration à votre main .fichier htaccess:
<FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin http://mydomain.com" </IfModule> </FilesMatch>
cette erreur peut aussi se produire lorsque vous utilisez les polices desubroutinize d, qu'aucune version D'Internet Explorer ne semble être capable de gérer.
si vous générez vos fichiers de police en utilisant pyftsubset du paquet fonttools , assurez-vous que vous faites et non mettez le drapeau --desubroutinize .