web-dev-qa-db-ja.com

IE9-CSS3111：@ font-faceで不明なエラーが発生しました

http://www.google.com/webfonts （Dosis、Open Sans、Lato）から3つのGoogleフォントを埋め込みます

そして、IE9が返される場合を除き、すべて正常に動作します。

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

そして、時々ウェブサイト全体を壊します。

これを解決するために何ができますか？

internet-explorercss3fontsgoogle-webfonts
30
Atadj

私はこの答えを見つけました。受け入れられた答えよりも直接質問に対処します

そして今、私たちの主なハイライト-「CSS3111：@ font-faceで不明なエラーが発生しました」。このエラーは非常にあいまいです。もう一度MSDNを見ると、Cascading Style Sheetsの「 "Web Open Font Format（WOFF）"および "Embedded OpenType font（EOT）"で不明な問題が発生しました」という説明が表示されます（ CSS）フォント」。 「不明な問題」は私にはあまりよく聞こえません-不明な問題をどのように解決するのですか？幸いなことにここでヒントが与えられます。 「フォントのソースを確認する」と書かれています。実際、CSS3111は通常、フォントのバイナリソースの問題が原因です。たとえば、人気のあるオンラインTTFからEOTへのコンバーターの1つは、Microsoft標準に準拠していないNAMEテーブルを持つEOTファイルを生成します。このため、EOTフォントはIE CSS3111エラー：したがって、CSS3111が発生した場合は、別のTTF to EOTコンバーターまたはフォントフェイスジェネレーターを使用してみることをお勧めします。

ソース： http://www.marinbezhanov.com/web-development/16/how-to-embed-webfonts-properly-and-how-to-solve-the-ambiguous-css3111-font-face-遭遇した未知のエラー/

25
Victor S

以下を使用してIE 9で問題を解決しました@font-face：

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

新しいWindows 10ポリシーにより、同じエラーが発生することがわかりました。 Windows 10 + IE11でエラーが発生した場合、解決策は次のとおりです。

IE 11：私自身のコードのエラーCSS3111、およびgoogle.com/fontsはフォントをレンダリングしません

2
malamirada

EOTフォントの2番目のソース宣言をコメントアウトしてくれました。 「src：url（ "../ fonts/webfonts/Helvetica Neue.eot"）;」のすぐ上の最初の宣言を確認してください。

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

このエラーは、desubroutinizedフォントを使用している場合にも発生する可能性があります。これは、Internet Explorerのどのバージョンでも処理できないようです。

pyftsubsetfonttools パッケージのフォントファイルを生成する場合は、必ずnot--desubroutinize 国旗。

0
Lukas Schmelzeisen

次のメモが役立つことを願っています。

フォントがリモートサーバー（CDNなど）にある場合、すべてのブラウザーで適切にレンダリングされません。それは部分的にのみ真実です。はい、明示的な「Access-Control-Allow-Origin」ヘッダーがない場合、FirefoxとInternet ExplorerはWebフォントを表示しません（F12を押してIEに移動し、 Consoleタブで、CSS3117を取得します：@ font-face failed cross-Origin request。リソースアクセスが制限されています。エラー）これは、IEおよびFirefoxがクロスドメインフォントを許可しないためです。一方、Google Chromeは問題なくフォントをロードします。クロスオリジンの問題に気付いていない場合、これをデバッグすると本当にイライラするかもしれません。私のフォントも同じドメインに配置するには、この宣言をメインの.htaccessファイルに追加する限り、リモートの場所に配置してすべてのブラウザーに正常にロードさせることができます。

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

リファレンスを参照

0
Ahsan Khurshid