网络字体何时加载，能否预加载？

Question

网络字体何时加载，能否预加载？

cssfontswebfonts

27

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

这不是很理想，它让我认为网络字体并没有在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;
}

- Brett

1

你能否发布一下你用来加载字体的代码？ - Billy Moat

@BillyMoat 抱歉，现在已经发布了。 :) - Brett

使用 src: local()。另请参见：https://dev59.com/H2ct5IYBdhLWcg3wI6N6 - Patrick

你的字体族名称是否应该像Roboto、RobotoItalic和RobotoBold这样？另外，在调用字体时，你是否指定了类似于'Roboto'、Helvetica、Arial、sans-serif这样的内容？ - Billy Moat

@BillyMoat 对于你后面的问题，是的我是。对于你前面的问题，不是，那样做意味着当网络字体无法下载且字体应该加粗时，你会遇到问题。参见：https://dev59.com/gmjWa4cB1Zd3GeqPt8rh - Brett

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tagawa · Accepted Answer

什么时候下载Web字体？

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

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

将CSS放在JavaScript之前
为字体添加远期过期时间（Expires）头部信息（以便浏览器缓存它们）
压缩字体

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