当做网页的字体负荷，你可以预先加载它们？(When do web-fonts load and ca

我的网络字体，他们可以开始可以采取第二个上来的时候注意; 就像如果你创建一个下拉导航菜单，当你将鼠标悬停在首次整个菜单将显示为只是一个第二，然后将文本将出现在背景色菜单。

这不是真正的理想，它使我相信加载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;
}

当网络字体下载？

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

这表明，当他们在一个页面已经习惯，而不是当他们在CSS正在申报大多数浏览器下载的字体。我认为IE是一个例外，但我不运行它，现在来测试。

之所以在下载使用，而不是声明是为了减少不必要的网络流量，例如，如果一个字体声明，但没有使用。

可下载字体可避免？

你说得对，如果已安装的字体就应该不需要下载。正如@Patrick上面说的，这是可以做到用local() 它的前置于url()在CSS并采取了字体的名称（随后被需要的Safari在Mac OS X中的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;
}

最后，减少字体下载时间，你可以确保你正在做以下几点：