在渲染网页之前等待字体加载 [英] Wait for fonts to load before rendering web page

问题描述

我正在使用@font-face 在我的网站中嵌入字体.首先文本呈现为系统默认值，然后(一旦字体文件可能已加载)正确的字体在几分之一秒后呈现.有没有办法通过将页面渲染延迟到字体加载或类似之后来最小化/摆脱这种延迟.

I'm using @font-face to embed fonts in my website. First the text renders as the system default, and then (once the font file has loaded presumably) the correct font renders a fraction of a second later. Is there a way to minimise/get rid of this delay, by delaying the page rendering until after fonts have loaded or similar.

推荐答案

这取决于浏览器的行为方式.

This is down to how the browser behaves.

首先你的@font 在哪里声明?它是嵌入到您的 HTML 中，在页面上的 CSS 表中声明，还是(希望)在外部 CSS 表中声明?

First off where is your @font declared? Is it inline to your HTML, declared in a CSS sheet on the page, or (hopefully) declared in an external CSS sheet?

如果它不在外部工作表中，请尝试将其移到一个(通常这是更好的做法).

If it is not in an external sheet, try moving it to one (this is better practice anyway usually).

如果这没有帮助，您需要问自己一秒钟的差异是否真的对用户体验有显着的不利影响?如果是，那么请考虑 JavaScript，您可能可以执行一些操作，重定向、暂停等，但这些实际上可能比原始问题更糟糕.对用户来说更糟，维护起来更糟.

If this doesn't help, you need to ask yourself is the fraction of a second difference really significantly detrimental to the user experience? If it is, then consider JavaScript, there are a few things you might be able to do, redirects, pauses etc, but these might actually be worse than the original problem. Worse for users, and worse to maintain.

此链接可能有帮助:

http://paulirish.com/2009/fighting-the-font-face-fout/

这篇关于在渲染网页之前等待字体加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！