@font-face в IE: всегда скачивать шрифт?

Question

При использовании специфичного для IE объявления font-face, как показано ниже:

@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, только если это необходимо?

Answer 1

С этим объявлением для 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');
}

IE 6/7/8 и ниже /IE9+ с включенным режимом совместимости: загружает связанный шрифт, несмотря ни на что.

Firefox / Opera / Chrome / Safari /IE9+ С отключенным режимом совместимости: при необходимости используется системный шрифт. Загружает связанный шрифт, когда системный шрифт недоступен.

Режим совместимости отключается с помощью:

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

Хорошая новость: шрифты кэшируются во всех браузерах. Их нужно загрузить только один раз.

Окончательный ответ. Невозможно избежать загрузки файла @font-face в IE 6/7/8 и IE 9+ с включенным режимом совместимости.

Answer 2

Если вы указываете "Arial Narrow", я бы предложил вообще не использовать @font-face. Это очень, очень распространенный шрифт, и его установит подавляющее большинство пользователей (Windows & Mac). Я бы просто указал запасной шрифт в вашем обычном стеке шрифтов:

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

Если вы используете менее распространенный (т. Е. Не веб-безопасный) шрифт, то ваш @font-face настроен именно так, как и должно быть.

Вот большой ресурс о том, как часто встречаются отдельные шрифты в Интернете:

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

Arial Narrow получает "скорее всего".