0

以下のようなIE固有のフォント面宣言を使用する場合：

@font-face{
    font-family:'Arial Narrow';
    font-style:normal;
    font-weight:normal;
    src:url('../fonts/ArialNarrow.eot');
    src:local('Arial Narrow'),
    local('ArialNarrow'),
    url('../fonts/ArialNarrow.eot') format('embedded-opentype'),
    url('../fonts/ArialNarrow.woff') format('woff');
}

私が見ることができることから、フォントはシステムフォントとして存在していても、私のシートが提案するフォントを毎回ダウンロードすることを主張しています。より効率的にするために、必要な場合にのみIEでフォントをダウンロードする方法はありますか？

4

2 に答える 2

2

「ArialNarrow」を指定している場合は、@font-faceをまったく使用しないことをお勧めします。これは非常に一般的なフォントであり、大多数のユーザー（WindowsおよびMac）にインストールされます。通常のフォントスタックでフォールバックフォントを指定するだけです。

body {
 font-family: "Arial Narrow", Arial, Helvetica, "sans-serif";
}

あまり一般的ではない（つまり、「非Webセーフ」）フォントを使用している場合は、@font-faceが正確に設定されます。

これは、特定のフォントがWeb上でどのように一般的であるかに関する優れたリソースです。

http://www.speaking-in-styles.com/web-typography/Web-Safe-Fonts/

ArialNarrowは「可能性が高い」を取得します。

于 2012-03-05T15:12:22.317 に答える
0

IE6 +のこの宣言では、次のようになります。

@font-face{
    font-family:'Arial Narrow';
    font-style:normal;
    font-weight:normal;
    src:url('../fonts/ArialNarrow.eot');
    src:local('Arial Narrow'),
    local('ArialNarrow'),
    url('../fonts/ArialNarrow.eot') format('embedded-opentype'),
    url('../fonts/ArialNarrow.woff') format('woff');
}

FF / Opera / Chrome / Safariのこの宣言：

@font-face{
    font-family:'Arial Narrow';
    font-style:normal;
    font-weight:normal;
    src:local('Arial Narrow'),
    local('ArialNarrow'),
    url('../fonts/ArialNarrow.ttf') format('truetype');
}

IE6/7/8以下/IE9+互換モードあり：リンクされたフォントをダウンロードします。

Firefox / Opera / Chrome / Safari / IE9 +互換モードがオフの場合：使用可能な場合はシステムフォントを使用します。システムフォントが使用できない場合に、リンクされたフォントをダウンロードします。

互換モードは次の場合に強制的にオフになります。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

朗報：フォントはすべてのブラウザにキャッシュされます。それらは一度だけダウンロードする必要があります。

最終回答：互換モードがオンになっているIE6/7/8およびIE9+で@font-faceファイルのダウンロードを回避する方法はありません。

于 2012-03-06T14:54:04.080 に答える