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

如果您指定“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 得到一个“可能”。

于 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');
}

IE 6/7/8 及更低版本/IE9+ WITH 兼容模式开启：无论如何下载链接字体。

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

兼容模式被强制关闭：

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

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

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

于 2012-03-06T14:54:04.080 回答