等待字体在渲染网页之前加载 [英] 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屋！