IE 中的@font-face：避免总是下载字体？

Question

当使用 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中下载字体，如果有必要？

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+ WITH 兼容模式开启：无论如何下载链接字体。

Firefox/Opera/Chrome/Safari/IE9+ 兼容模式关闭：在可用时使用系统字体。系统字体不可用时下载链接字体。

兼容模式被强制关闭：

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

好消息：字体在所有浏览器中都有缓存。它们只需下载一次。

最终答案：在 IE 6/7/8 和 IE 9+ 兼容模式下，无法避免 @font-face 文件下载。

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 得到一个“可能”。