css - 网络字体什么时候加载，您可以预加载它们吗？

Question

我注意到在使用网络字体时，它们最初可能需要一秒钟才能出现；就像你创建一个下拉导航菜单一样，当你第一次将鼠标悬停在菜单上时，整个菜单将仅显示为背景色一秒钟，然后文本将出现。

这不是很理想，它让我相信 webfonts 不是在加载 CSS 文件时下载的，而是在您第一次在页面上查看它们时下载的。

但另一方面，我的 PC 上已经安装了字体，因此不需要下载它们，这就引出了一个问题，他们为什么要这样做!？

这是我用来加载我的网络字体的 CSS:

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Italic-webfont.eot');
    src: url('../fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Italic-webfont.woff') format('woff'),
         url('../fonts/Roboto-Italic-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Italic-webfont.svg#RobotoItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold-webfont.eot');
    src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Bold-webfont.svg#RobotoBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Light-webfont.eot');
    src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Light-webfont.woff') format('woff'),
         url('../fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Light-webfont.svg#RobotoLight') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium-webfont.eot');
    src: url('../fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Medium-webfont.woff') format('woff'),
         url('../fonts/Roboto-Medium-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
    font-weight: 500;
    font-style: normal;
}

Answer 1

什么时候下载网络字体？

Paul Irish 制作了一个简单的页面来对此进行测试:http://dl.getdropbox.com/u/39519/webfontsdemo/loadtest.html

它表明大多数浏览器在页面中使用字体时而不是在 CSS 中声明时下载字体。我相信 IE 是个异常(exception)，但我现在没有运行它进行测试。

下载使用而不是声明的原因是为了减少不必要的网络流量，例如如果声明了字体但未使用。

可以避免字体下载吗？

你是对的，如果已经安装了字体，则不需要下载它们。正如@Patrick 上面所说，这可以使用 local() 来完成。它位于 CSS 中的 url() 之前，并采用字体名称(Mac OS X 上的 Safari 随后需要 PostScript 名称)。尝试对您的 CSS 进行以下更改:

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: local(Roboto Regular), local(Roboto-Regular),
         url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

最后，为了减少字体下载时间，您可以确保执行以下操作:

• 将 CSS 置于 JavaScript 之前
• 添加远期 Expires header 字体(以便浏览器缓存它们)
• GZiping 字体

这里是处理字体显示延迟的一个很好的总结:http://paulirish.com/2009/fighting-the-font-face-fout/