Web字体在加载时闪烁 [英] Web Font flickering on load

问题描述

我们有一个网站-一切正常，但是网页加载之前，网页字体闪烁了一秒钟.

We have a website - everything is working but web fonts flicker for a split second before the page loads.

这似乎在其他网站上没有发生&我看不出有什么区别.

This doesn't seem to happen on other sites & I can't see any difference.

我们正在使用fonts.com字体.

We are using fonts.com fonts.

我在Google上能找到的只是Firefox的一个问题-但这对我来说在所有浏览器中都会发生.

All I can find on Google is an issue with Firefox - but this happens in all browsers for me.

例如 http://lpff.niico.co.uk/About/Who -我们/我们的人

有什么明显的我想念的吗?我该如何解决?

Is there something obvious I have missed? How can I fix this?

推荐答案

有几种方法可以解决这个问题.

There's a couple ways to battle this.

1-由于您是从网站上提取字体，并且没有在本地本地托管字体，因此页面加载和从fast.fonts.net加载字体之间会有延迟.

1 - Since you're pulling the font from a website and you don't have the font hosted locally on your own server, there's a delay between your page loading and the font loading from fast.fonts.net.

如果下载字体(.ttf)并通过fontsquirrel的webfont生成器运行它，则应该会引起一些加载问题.

If you download the font (.ttf) and run it through fontsquirrel's webfont generator, it should elevate some of the loading issue.

2-由于页面加载仅闪烁几秒钟，因此可以在加载字体(200毫秒)的同时将网页内容隐藏一小段时间.这样可以确保在加载页面内容时，您的用户不会看到闪烁.

2 - Since it's only flickering for a few seconds on page load, you can hide your webpage's content a short duration while the font loads (200 milliseconds). This will ensure that when your page content loads that your user doesn't see the flickering.

Paul Irish有一篇关于此的文章: http://www.paulirish.com/2009/fighting-the-font-face-fout/

Paul Irish has an article about this: http://www.paulirish.com/2009/fighting-the-font-face-fout/

这篇关于Web字体在加载时闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！