Question

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

这不是非常理想的，它让我相信在加载CSS文件时不会下载网页字体，而是当你第一次在页面上查看它们时。

但另一方面，我已经在我的电脑上安装了字体，因此不需要下载这些字体，因此提出了他们为什么这样做的问题！？

以下是我用来加载我的网页字体的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是例外，但我现在还没有运行测试。

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

可以避免字体下载吗？

你是对的，如果已经安装了字体，则不需要下载它们。正如@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;
}

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

在JavaScript之前放置CSS
为...添加远期Expires标头字体（因此浏览器缓存它们）
GZipping the fonts

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

什么时候加载Web字体并且可以预先加载它们？

1 个答案: