网络字体何时加载，您可以预加载它们吗? [英] When do web-fonts load and can you pre-load them?

问题描述

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

I've noticed when using web fonts that they can initially can take a second to come up; like if you create a drop down nav menu, when you hover over the menu for the first time the whole menu will appear as just the background color for a second and then the text will appear.

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

This isn't really ideal and it leads me to believe that webfonts aren't downloaded when the CSS file is loaded, but rather when you first view them on the page.

但另一方面，我已经在我的 PC 上安装了字体，所以不需要下载它们，所以问题是他们为什么要这样做！?

But on the other hand, I already have the fonts installed on my PC so they shouldn't need to be downloaded, so that lends the question on why do they do this!?

这是我用来加载我的 webfonts 的 CSS:

Here is the CSS I use to load my webfonts:

@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;
}

推荐答案

webfonts 什么时候下载?

Paul Irish 做了一个简单的页面来测试这个:http://dl.getdropbox.com/u/39519/webfontsdemo/loadtest.html

Paul Irish made a simple page to test this: http://dl.getdropbox.com/u/39519/webfontsdemo/loadtest.html

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

It shows that most browsers download fonts when they're used in a page rather than when they're declared in CSS. I believe IE is the exception but I don't have it running to test right now.

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

The reason for downloading on usage rather than on declaration is to reduce unnecessary network traffic, e.g. if a font is declared but not used.

可以避免字体下载吗?

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

You're right that if fonts are already installed they shouldn't need to be downloaded. As @Patrick said above, this can be done using local(). It's placed before url() in the CSS and takes the name of the font (the PostScript name is subsequently needed for Safari on Mac OS X). Try out the following change to your 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;
}

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

Finally, to reduce font download times, you could make sure you're doing the following:

• 将 CSS 置于 JavaScript 之前
• 为未来添加Expires 标头字体(以便浏览器缓存它们)
• GZIP 字体

• Putting CSS before JavaScript
• Adding far-future Expires headers for the fonts (so the browser caches them)
• GZipping the fonts

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

Here's a good summary of dealing with font display delays: http://paulirish.com/2009/fighting-the-font-face-fout/

这篇关于网络字体何时加载，您可以预加载它们吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！