web-dev-qa-db-ja.com

@ font-faceが特定のバージョンのInternet Explorer 11で機能しない

似たような質問がたくさんあることは知っていますが、この状況は本当に奇妙に思えます。 Internet Explorer 11（Windows 7 Pro）では@ font-faceが壊れているようです。具体的には、バージョン：11.0.9600.17728、更新バージョン：11.0.18 。

@ font-faceは、Chrome、Firefox、Safari、Opera（該当する場合、LinuxとWindowsの両方）で正常に動作しています。実際、Internet Explorerバージョンでも動作しています：11.0.9600.17633、更新バージョン：11.0.16、Windows 7でも実行私が持っている別のマシン。

開発者コンソールには、フォントの取得に問題があることを示すものは何もありません。問題を再現するために、html/cssを非常に基本的なものに簡略化しました。以下の場合、カスタムフォントはどちらも機能していません（その特定の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>

...そして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;
}

ここで実行中のコード を見つけることができます。
IEの問題を引き起こしているバージョン）を使用してそのページを表示すると、テキストフォントがデフォルトになり、アイコンの代わりにspanタグ。

私がテストした他のすべてのブラウザーで@ font-faceが動作していることを考えると（IE 11）の異なるバージョンであっても）これはIEのバージョンのバグである可能性が高く、さらに修正またはデバッグするためにできますか？

htmlcssinternet-explorerfont-face
18
RTF

これは、この バグレポート で説明されているセキュリティ設定の問題に関連している可能性があります。

インターネットオプションで次の場所に移動します。

  • セキュリティタブ
  • このゾーンのセキュリティレベル
  • カスタムレベル
  • ダウンロード
  • フォントのダウンロード

無効になっている場合は、有効にする必要があります。

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.

13
BSMP

問題が「@ font-faceがInternet Explorer 11の特定のバージョンで機能しない」場合

フォントの埋め込み可能性を確認します：インストール可能 enter image description here

埋め込み可能でない場合：インストール可能、インストール可能フォントを追加すれば、完全に機能します。

2
Thilina Dharmasena

この問題は、Internet Explorerの特定のバージョンでHTTPSを使用することに関連している可能性があります。 バージョン11.0.9600.19035、アップデートバージョン11.0.65 Win 7での実行も影響を受けることがわかりました。

GoogleはMicrosoft Internet Explorerバージョン6以降をサポートすると述べていますが、それらのフォントは上記と同じように影響を受けます。

HTTP経由でフォントを提供すると、「混合コンテンツ」警告が表示されます。警告を受け入れた後、フォントは影響を受けるIEでは表示されますが、影響を受けないIEでは表示されません。

現在、回避策はなく、影響を受けるバージョンをHTML/CSS/JavaScriptで検出する方法すらありません。

0
jofeu

Apacheレベルで「eot」ファイルの「Vary」ヘッダーを削除することで修正

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