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

Question

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

这不是很理想,它让我相信在加载CSS文件时不会下载webfonts,而是当你第一次在页面上查看它们时.

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

这是我用来加载我的webfonts的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

什么时候下载webfonts？

保罗爱尔兰做了一个简单的页面测试这个:http://dl.getdropbox.com/u/39519/webfontsdemo/loadtest.html

它表明大多数浏览器在页面中使用时下载字体,而不是在CSS中声明它们.我相信IE是例外,但我现在没有运行测试.

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

可以避免字体下载吗？

你是对的,如果已经安装了字体,则不需要下载它们.正如@Patrick上面所说,这可以使用local().它放在url()CSS 之前并获取字体的名称(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字体

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