关于javascript:什么是-Web-应用里加载-google-font-带来的-FOIT-和-FOUT-问题

2次阅读

共计 922 个字符,预计需要花费 3 分钟才能阅读完成。

在 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 获取代码并集成到您的网站中。

正文完
 0