web-dev-qa-db-ja.com

On IE CSS font-faceは、内部リンクをナビゲートする場合にのみ機能します

私たちのウェブデザイナーは、次のフォントフェイスを持つCSSを作成しました：

@font-face {
    font-family: 'oxygenregular';
    src: url('oxygen-regular-webfont.eot');
    src: url('oxygen-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('oxygen-regular-webfont.woff') format('woff'),
         url('oxygen-regular-webfont.ttf') format('truetype'),
         url('oxygen-regular-webfont.svg#oxygenregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

IEおよびFirefixで正常に動作します。ただし、問題があります。IEで、内部Webページリンクを使用してページをナビゲートした場合にのみフォントが正しくレンダリングされます。 。[更新]または[戻る]ボタンをクリックすると、デフォルトのフォント（Times New Roman）に置き換えられます。

現在、WebサイトはHTTPSを使用していますが、HTTPを使用した場合にも同じ問題が発生しました。

内部Webサイトリンクを使用してナビゲートすると、IE開発者ツール（Shift-F12））の[ネットワーク]タブに次のように表示されます。

/Content/oxygen-regular-webfont.eot?    GET 200 application/vnd.ms-fontobject

更新/戻るボタンを使用すると、他のフォントにも2つのエントリがあります。

/Content/oxygen-regular-webfont.woff    GET 200 application/x-font-woff
/Content/oxygen-regular-webfont.ttf GET 200 application/octet-stream

CSSファイル自体は次の方法で読み込まれます。

/Content/site.css   GET 200 text/css

Woffとttfの両方を削除しようとしたので、次のようになりました。

@font-face {
    font-family: 'oxygenregular';
    src: url('oxygen-regular-webfont.eot');
    src: url('oxygen-regular-webfont.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

ただし、それでもIEは同じように動作します（woffとttfをダウンロードしないことを除いて）：戻る/更新をナビゲートするときに誤った代替フォントを表示します。

更新/戻るアクションで正しいフォントをロードするためにIEを作成するにはどうすればよいですか？

cssinternet-explorerhttpsfont-face
30
JustAMartin

私は解決策を見つけましたが、それが機能する理由がわかりません（まあ、1つの理由だけ-それはIE：D）です）。

私がしたことは、同じサイトをApacheに置いて、もう一度テストすることでした。 Apacheでは、[更新]ボタンを使用しても、フォントが正常に機能していました。次に、ネットワークインスペクターで、Apacheがeotファイルに対して200ではなく304を返しているのを確認しました。これは、キャッシュの問題です。私は自分のASP.NETアプリに行って、確かに-セキュリティ上の理由から（また、キャッシングを回避するためにAJAXリクエスト））誰かが想像できるすべてのキャッシングを無効にしました：

        // prevent caching for security reasons
        HttpContext.Current.Response.Cache.SetAllowResponseInBrowserHistory(false);
        HttpContext.Current.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1));
        HttpContext.Current.Response.Cache.SetValidUntilExpires(false);
        HttpContext.Current.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
        HttpContext.Current.Response.Cache.SetNoServerCaching();

        // do not use any of the following two - they break CSS fonts on IE
        HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
        HttpContext.Current.Response.Cache.SetNoStore();

コードの最後の2行をコメントアウトするとすぐに、IEで問題なくフォントが機能し始めました。 IEフォントがキャッシュされていない場合、フォントをロードできません。しかし、なぜ問題が発生するのは、更新/元に戻ったときだけなのかわかりません。

編集-代替ソリューション

最後の2行にコメントする代わりに

    // do not use any of the following two - they break CSS fonts on IE
    HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
    HttpContext.Current.Response.Cache.SetNoStore();

代わりにSetAllowResponseInBrowserHistoryをtrueに変更します。

HttpContext.Current.Response.Cache.SetAllowResponseInBrowserHistory(true);

これは、私が理解しているように、前後のナビゲーションを除いて、キャッシュなしを許可するはずです。 MSDN-SetAllowResponseInBrowserHistoryメソッド

22
JustAMartin

私は同じ問題に直面しました。

。eotファイルのヘッダーにCache-Control：no-cache値が含まれている場合、IE9はフォントを正しくロードしません。開発ツールは結果 --200を示しましたが、列Received 400Bを示し、同時にContent-Lengthは70Kbでした。私は次の値を使用しましたCache-Control：max-age = 0、問題を修正しました。

15
Alexandr Skachkov

私はちょうど同じバグを抱えていました、そして純粋な解決策（正確ではない-テクノロジー関連）が欲しい人のために：あなたはあなたが送っているフォントヘッダーがno-cacheを言っていないことを確認する必要があります。以前に書かれたものに加えて、実際にはそれを行うことができる2つのヘッダーがあります。

"cache-control: no-cache"

そして

"pragma: no-cache"

どちらもブラウザは同じだと言っています。最初のブラウザはHTTP1.1の一部であり、2番目のブラウザは古い（HTTP1.0）です。

今、解決策：

  • クライアント側のキャッシュなしでフォント（およびその他のファイル？）を本当に提供したい場合は、"cache-control" to "max-age=0";を設定します。プラグマヘッダーを削除できます。これは廃止されています（または"pragma: cache"に設定してください）。
  • 実際にキャッシュが必要な場合：no-cache値を削除し、適切なmax-ageを設定します（例："cache-control: max-age=3600"-1時間のキャッシュ）。プラグマは"pragma: cache"に設定することも、完全に削除することもできます。
6
Michal

この問題を解決するための代替ソリューションを見つけました。

個別のフォントファイルとして読み込むのではなく、フォントを直接スタイルシートに埋め込みました。これは、Windows、Mac、IOS、Androidなどを含むすべてのブラウザーで完全に正常に機能し、Webページ内のHTTP要求の数を減らすのに役立ちます。

これには、ヘッダーのCache-Controlを変更する必要はありません。

@font-face { font-family: '<FONT NAME>'; src: url(data:application/x-font-woff;charset=utf-8;base64,<BASE64_ENCODED>) format('woff'), url(data:application/x-font-ttf;charset=utf-8;base64,,<BASE64_ENCODED>) format('truetype'); font-weight: normal; font-style: normal; }

フォントエンコーディングには、OSXまたはLinuxに組み込まれているbase64コマンドを使用できます。

4
Selvan K

JustAMartin の answer は別の解決策を導きました：

最後の2行にコメントする代わりに

    // do not use any of the following two - they break CSS fonts on IE
    HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
    HttpContext.Current.Response.Cache.SetNoStore();

次の行を追加しました。

HttpContext.Current.Response.Cache.SetAllowResponseInBrowserHistory(true);

これは、私が理解しているように、前後のナビゲーションを除いて、キャッシュなしを許可するはずです。 MSDN-SetAllowResponseInBrowserHistoryメソッド

3
Aldracor

グローバルレスポンスのNoCacheおよびNoStore設定を削除すると、フォントが修正されますが、これらの設定が必要な場合は、明らかにその答えにはなりません。

私の理解では、キャッシュを期限切れに設定するだけでは、キャッシュされたページの表示が一貫して妨げられるわけではありません。サーバーにチェックを強制しますが、ページが変更されていない場合（304応答）は（通常は？）キャッシュされたバージョンを表示する可能性があります。

（実際にこれを読んでいると、SetNoServerCachingと組み合わせてクライアントキャッシュをすぐに期限切れにするように設定すると、クライアントページが常に更新される可能性がありますか？パフォーマンスに影響を与える可能性があるようです。）

ASP.NET MVCでは、コントローラーでOutputCacheAttribute属性を使用してキャッシュを無効にしても、IEフォントが壊れないことがわかりました。

[OutputCacheAttribute(VaryByParam = "*", Duration = 0, NoStore = true)]
public class FooController : Controller
{
    ...
}

NoStoreはSetCacheability（HttpCacheability.NoCache）と同じではないことはわかっていますが、この目的には機能しているようです。

コードをよりクリーンにするために、継承元の属性を持つ基本コントローラーを作成できます。

2
Darren Rogers

パスの問題ではないことを確認してください。つまり、CSSファイルはフォントの場所に関連しています。あなたの場合、あなたはあなたのフォントファイルと同じフォルダにあなたのCSSファイルを必要とします。

1
jimmy

Vary Requestヘッダーをhttpsに設定しないでください

フォントの読み込みなし

Vary:Accept-Encoding,https

作品

Vary:Accept-Encoding

キャッシュヘッダーを設定する必要があります フォントの読み込みの遅延を回避する 。

1
Matthias M