什么是 Web 应用里加载 google font 带来的 FOIT 和 FOUT 问题?

发布时间 2023-03-26 11:26:19作者: JerryWang_汪子熙

在 Web 应用中,当你使用 Google Fonts 或其他字体资源时,可以通过添加 &display=swap 参数来实现 FOIT(Flash of Invisible Text)和 FOUT(Flash of Unstyled Text)的优化。

当 Web 应用在加载 Google 字体时,可能会遇到 FOIT(Flash Of Invisible Text)和 FOUT(Flash Of Unstyled Text)问题。

FOIT 意味着在页面加载 Google 字体之前,文本内容是不可见的,这通常发生在字体文件下载时。如果字体文件下载速度较慢或不可用,用户将看到无字体的页面,直到字体文件下载完成为止。

FOUT 意味着在 Google 字体加载完之前,浏览器使用了默认字体渲染文本。一旦字体加载完成,文本会突然改变样式,从默认字体切换到 Google 字体。

这些问题通常可以通过使用适当的 CSS 和 JavaScript 技术来解决,例如使用 Web Font Loader 等库来控制字体加载过程,或者使用内联字体来避免字体文件的网络请求。

在默认情况下,浏览器会在字体加载完成之前使用备用字体来展示文本内容,这可能会导致 FOIT 或 FOUT 的问题。而添加 &display=swap 参数可以让浏览器在字体加载完成之前先展示备用字体,然后再切换到正确的字体,从而避免 FOIT 或 FOUT 的问题。

通过添加 &display=swap 参数,字体资源会在后台加载,而不会阻塞主线程的渲染,这有助于提高页面加载速度和性能。

Web Font Loader是一个JavaScript库,用于在网页加载期间异步加载和管理Web字体。Web字体是自定义字体,可以在网页中使用,这些字体不是安装在用户计算机上的标准系统字体。

Web Font Loader提供了一种方法,可以在网页加载过程中异步加载Web字体,这样可以更好地控制字体的呈现和渲染,提高网站的性能和可访问性。它还提供了一些附加功能,如检测字体加载状态和处理加载失败的情况。

Web Font Loader支持各种Web字体加载服务和格式,包括Google Fonts、Typekit、Webtype和Fontdeck。它是一个开源项目,可以通过GitHub获取代码并集成到您的网站中。