31

当社のウェブ デザイナーは、次のフォント フェイスを使用して 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 を使用している場合にも同じ問題が観察されました。

IE 開発者ツール (Shift + F12) の [ネットワーク] タブで、内部 Web サイト リンクを使用して移動すると、次のように表示されます。

/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 をダウンロードしないことを除いて)。[戻る] または [更新] をナビゲートするときに、誤ったフォールバック フォントが表示されます。

Refresh/Back アクションで IE が正しいフォントをロードするようにするにはどうすればよいですか?

4

8 に答える 8

23

私は解決策を見つけましたが、それが機能する理由がわかりません（まあ、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メソッド

于 2012-11-16T21:39:47.150 に答える
6

私はちょうど同じバグを抱えていました.純粋な解決策（厳密な技術に関連していない）が必要な人のために：送信しているフォントヘッダーが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"完全に設定または削除できます。
于 2016-05-17T07:44:42.493 に答える
3

JustAMartinの回答により、別の解決策にたどり着きました。

最後の 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 メソッド

于 2015-09-18T10:23:21.477 に答える
2

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

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

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

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

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

NoStore は SetCacheability(HttpCacheability.NoCache) と同じではありませんが、この目的には機能するようです。

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

于 2015-01-07T23:30:14.593 に答える
1

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

于 2012-11-16T10:56:36.740 に答える