如何防止使用 Google Webfont API 的网页闪烁?

发布于 2024-10-23 00:06:28 字数 290 浏览 1 评论 0原文

在我的 Web 应用程序 (http://status.net/) 上,对于新的默认主题,我们使用 Google Webfonts API (http://code.google.com/apis/webfonts/)。该集合中有一些非常漂亮的字体,它确实使我们的软件看起来更好。

然而,当页面加载时,我们会看到闪烁或闪烁。在 Webkit 浏览器中,在加载字体文件之前,使用字体的区域是空白的。在 Firefox 中,整个事情似乎回流了好几次。

在 Webfont API 中我们应该注意什么吗?照顾我们的后备字体吗?这是正常的吗?

On my Web app (http://status.net/), for our new default theme, we're using the Google Webfonts API (http://code.google.com/apis/webfonts/). There are some very nice fonts in the collection, and it definitely gives a better look to our software.

However, when a page loads, we see a flicker or flash. In Webkit browsers, the area where the fonts are used is blank, until the font file is loaded. In Firefox, the whole thing seems to reflow several times.

Are there things we should look out for in the Webfont API? Take care with our fallback font? Is this normal?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

内心旳酸楚 2024-10-30 00:06:28

Evan, Olivier 写了一篇文章测试不同的字体服务 。在 Opera 中,我没有注意到任何事情。我想知道您是否在谈论 FOUC(Flash Of Unstyled Content)。虽然我没有看到进口。字体从哪里来? CSS 还是 JS?

Evan, Olivier had written an article testing different services for fonts. In Opera, I haven't noticed anything. I wonder if you are talking about the FOUC (Flash Of Unstyled Content). Though I do not see an import. Where the fonts are coming from? CSS or JS?

暗喜 2024-10-30 00:06:28

是的,您可以使用网络字体加载器。给出的示例是在所有浏览器上重现 Firefox 的行为,我认为这是不幸的(而不是您正在寻找的),但您可以修改它以例如在加载字体之前隐藏文本:

.wf-loading p {
    visibility:hidden;
}

PS:期待看到StatusNet 的新主题,当前的主题绝对值得进行一些可用性和设计改进;)

Yes you can, using the Webfont loader. The example given is to reproduce Firefox's behavior on all browsers, which I think is unfortunate (and not what you're looking for), but you can modify that to for instance hide the text before the font's loaded:

.wf-loading p {
    visibility:hidden;
}

PS: Looking forward to seeing the new theme for StatusNet, the current one definitely deserves some usability and design improvements ;)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文