即使使用Web Font Loader，如何避免出现未样式化文本(FOUT)的问题?

问题描述

我使用的是大约100kb的自定义字体.可以想象，浏览器文本从不可见文本闪烁到可见文本.因此，我开始使用webfontloader: https://github.com/typekit/webfontloader

I'm using a custom font which is large ~100kb. As you can imagine, the browser text is flashing from invisible to visible text. I therefore started using the webfontloader: https://github.com/typekit/webfontloader

但是，即使使用此fontloader，文本仍会闪烁.页面以默认字体加载，然后一旦webfontloader说加载了字体，就会触发CSS使用加载的字体，但是它仍然会导致文本闪烁...例如，请参见codepen.每当您硬刷新并且需要加载字体时，文本就会闪烁.

However, even with this fontloader, the text still flashes. The page loads with the default font, and then once the webfontloader says the font has loaded, the CSS is triggered to use the loaded font however, it still results in the text flashing... See the codepen for example. Anytime you hard-refresh and the font needs to load, the text is flashing.

https://codepen.io/anon/pen/LQGrpL

WebFont.load({
  custom: {
    families: ['Inter UI'],
    urls: ['https://rsms.me/inter/inter-ui.css']
  }
});

body,
button {
  font-weight: 400;
  font-size: 14px;
  font-family: sans-serif;
  font-style:  normal;
}

.wf-active body,
.wf-active button {
  font-weight: 400;
  font-size: 14px;
  font-family: 'Inter UI';
  font-style:  normal;
}

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<h1>Hello World</h1>

<p>Good day to you...</p>

<button>Thank you</button>

我有什么办法可以避免这种闪烁?这是一种可怕的用户体验.

Is there anything I can do to avoid this flashing? It's a horrible user experience.

推荐答案

考虑试用 Web Font Loader库 ，该库提供了一个事件系统，可让您控制页面的外观随着字体的加载而动态变化.

Consider experimenting with the Web Font Loader library which provides an event system that allows you to control the appearance of your page dynamically as fonts are loaded.

此处

这篇关于即使使用Web Font Loader，如何避免出现未样式化文本(FOUT)的问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！