如何确保文本在网页字体加载期间仍然可见

Wordpress大师

说到网站设计，要考虑的最重要的一个方面是如何显示文本。确保文本在网页字体加载过程中保持可见和易读，这对于在浏览网页时为用户提供愉快的体验至关重要。本文解释了“确保文本在webfont加载期间保持可见”警告的含义，它如何影响UX和SEO，以及一些修复它的方法。在使用常用工具（如Google pagespeedinsights）对我们的网站进行性能审计时，我们经常得到一些警告。我们通常会忽略这些警告，也不会费心去修复它们，结果，这些警告对UX（用户体验）、SEO（搜索引擎优化）、网站性能以及其他相关因素都是有害的。在本文中，我们将了解一个非常流行的灯塔警告“确保文本在webfont加载期间仍然可见”，并将学习如何通过各种方法修复它。



在这篇文章中探索“确保文本在webfont加载期间保持可见”警告什么是不可见文本的闪光（FOIT）?在webfont加载期间，不可见的文本如何影响UX和SEO ?UX（用户体验）SEO（搜索引擎优化）如何确保文本在网页字体加载期间保持可见?（WordPress修复）修复手动修复WordPress插件仍然无法修复webfont加载问题?确保文本在网页字体加载期间仍然可见-谷歌字体确保文本在网页字体加载期间仍然可见-字体Awesome确保文本在网页字体加载期间仍然可见-本地字体结论常见问题











探索“确保文本在网页字体加载期间仍然可见”警告

如果你是一个开发人员，或者如果你拥有一个网站，你可能会遇到这个常见的警告，而在PageSpeed insights上运行网站的性能审计。此警告是Lighthouse的建议，用于帮助您在加载网页时突出显示网页上文本缺乏可见性的问题。这是一个常见的问题，因为人们经常追求花哨或美观的字体，为了做到这一点，他们使用现代字体库，如font Awesome, Google fonts，或Adobe fonts，不幸的是，这些字体库不存在于访问者的系统中，所以他们需要先从互联网上下载，然后在网页上呈现。这是一个耗时的过程，因此，Lighthouse注意到了这一点，并向我们抛出了这个警告“确保文本在webfont加载期间仍然可见”。这本质上意味着，即使网页字体尚未加载，文本也应该保持可见。在网页字体加载过程中，文本应该被打开的主要原因是用户体验。我们不应该让访问者看到一个空白的文本屏幕，然后等待字体加载到他们的系统上，因为这可能会导致糟糕的最终用户体验，这就是为什么Lighthouse将此标记为网站开发人员/所有者需要尽快解决的重要问题。现在我们知道了这个警告是关于什么的，让我们深入了解一些相关的概念，这些概念可以帮助我们更好地理解它，并更好地映射相关的关系。什么是闪烁的不可见文本（FOIT）?“看不见的文字闪烁（FOIT）”是一个常用术语，用来描述网页上使用网页字体时的一种现象。当你打开一个新的网页时，浏览器需要花费大量的时间来加载网页字体，因为它需要首先下载相关的字体文件。默认情况下，这些字体在访问者的系统上是不可用的，因此，该网页字体的文本在加载期间是不可见的。这个加载周期很明显，因为它们通常是较大的文件。这就是所谓的不可见文本闪烁（FOIT）。这个概念与我们的灯塔警告“确保文本在网页字体加载期间仍然可见”特别相关，因为它反映了由于网页字体加载而导致文本不可见的相同问题d。









FOIT经常发生在你的互联网连接不好的时候，因为它会花费更多的时间来下载网页字体，或者当多个网页字体被使用在一个网页上。这个问题在移动设备上可能更加明显。为了解决FOIT问题，可以使用多种技术，包括字体预加载或字体显示属性，以确保可以立即显示文本的备用字体，同时，web字体可以正确加载，然后显示。有三种不同的字体显示属性:swap、fallback和optional。   





让我们简要地探讨一下它们以及它们如何影响FOIT。1。让我们简单地探索一下如何在代码层将这个属性添加到WordPress站点中。在加载网页字体的CSS文件中，你可以在加载网页字体的@font-face规则中添加font-display: swap。CSS文件中的@font-face属性看起来像这样:



  

这将帮助您修复FOIT，因此，您将不会在Google灯塔pagesspeed Insights上看到“确保文本在webfont加载期间仍然可见”的警告。2。这个属性类似于Font-display: swap 1，但是它要提前一个级别来解决FOIT问题。那么，让我们假设需要下载的网页字体不可用，那么会发生什么?这正是font-display: fallback发挥作用的地方。它做的和swap属性做的差不多，除了它还处理当web字体不可用或不能正确下载时的用例。它所做的只是告诉浏览器继续使用备用字体，以防需要下载的网页字体由于任何已知或未知的原因而不可用。如果网页字体需要大量的时间来加载，使用font-display: fallback可能会导致无样式文本（FOUT）的闪烁，因为回退字体将显示，直到网页字体准备好。

3。这个属性的行为类似于font-display: fallback，除了这里，浏览器被指示只在可用的情况下使用网页字体，但如果没有则使用备用字体。这本质上也意味着，如果网页字体需要很长时间加载，浏览器可能会选择不显示备用字体，结果可能导致FOIT。总的来说，如果您比较这三个属性，那么font-display: swap似乎是克服FOIT问题的最佳属性，其次是font-display: fallback，如果web字体需要相当多的时间来加载，那么它有获得FOUT的缺点，然后是font-display: optional。在font-display: fallback或font-display: optional之间的选择取决于您的偏好。在webfont加载期间，不可见的文本如何影响UX和SEO ?

UX（用户体验）和SEO（搜索引擎优化）是当今任何现代网站最关键的两个因素，了解这两个因素是如何受到网页字体加载过程中不可见文本的影响是非常重要的。下面我们来探讨一下这两个问题。UX（用户体验）看到看不见的文本对最终用户来说可能是一场噩梦。没有访问者愿意访问你的网页，看到看不见的文字或一些无法解释的变化和布局，因为网页字体是在后台加载。这肯定会导致糟糕的最终用户体验，并可能让您的网站访问者感到沮丧，甚至可能永远不会再访问您的网站。看不见的文本使得用户很难阅读网页内容，特别是当文本是用户页面的重要组成部分时体验，如导航链接或标题，号召行动按钮等。

指标，如LCP（最大内容绘制），CLS（累积布局移位）和FID（首次输入延迟）是决定最终用户体验的三个关键指标，包括加载和响应用户交互的速度。不可见文本对这些指标和其他类似指标都有不利影响。

让我们来看看不可见文本对它们的影响。1。最大含量涂料（LCP）   





假设你有一个WordPress页面，它使用了一些默认情况下访问者系统上不可用的网页字体。因此，当访问者访问你的网页时，他们的浏览器在呈现使用这些字体的任何文本之前就开始下载字体文件。如果在浏览器下载网页字体时，网页上有一个不可见的文本，浏览器可能仍然需要等待字体文件下载，然后才能在屏幕上绘制可见的文本。因此，如果最大的绘制是文本，则LCP可能会有明显的延迟，因为浏览器必须先等待字体文件下载，然后才能在页面上显示最大的可见内容。2。累积布局移位（CLS）

  

在网页字体加载期间不可见的文本在许多方面对累积布局移位（CLS）产生不利影响。为了帮助我们更好地理解，让我们以网页加载过程为例。当网页加载时，浏览器需要下载并呈现显示该页所需的所有资源，包括该页上可能使用的任何自定义字体。如果自定义字体不可用，那么浏览器可能会使用备用字体，这会导致文本的显示与加载自定义字体后的显示不同。因此，一旦加载了自定义字体，当文本跳转到不同的位置或大小时，可能会出现意想不到的布局变化。3。首次输入延迟（FID）

  

通常FID不受字体加载的影响。这是因为文本元素即使没有正确呈现，仍然可以是交互式的。如何看不见的文本在webfont加载影响谷歌的pagespesights得分?Google的pagesspeed Insights得分是基于各种因素计算的，包括LCP、CLS、FID和其他一些指标。我们已经看到不可见的文本如何对LCP和CLS产生负面影响。如果网页上的网页字体在这些指标上造成了负面延迟，那么pagesspeed可能会受到负面影响，即使页面表面上看起来加载很快。总的来说，我们可以看到，不可见的文本确实对网页的pagesspeed Insights总体得分产生了负面影响。综上所述，网页字体加载过程中不可见的文字对用户体验是不利的。想要加速你的网站立即?

获得90+页面速度得分自动与10Web助推器在任何主机上! 不需要信用卡，想要加快你的网站立即?

获得90+页面速度得分自动与10Web助推器在任何主机上! 无需信用卡 搜索引擎优化要了解网页字体加载过程中不可见的文字是如何影响SEO的，我们需要大致了解一下搜索引擎是如何对网站进行排名的。搜索引擎使用一个网页的内容来确定这个网页是关于什么的，并正确地索引它。一般来说，效果不会太大，因为这个不可见的文本只在加载期间停留，之后一切都恢复正常。如果字体不能正确加载并且之后保持不可见，或者如果显示文本花费太多时间，则可能会影响。然而，另一个影响也很重要:糟糕的用户体验（上一节）意味着糟糕的访问者信号和较低的CWV和pagspeed得分。所有这些都会对搜索引擎优化产生不利影响，因为搜索排名算法会考虑用户信号和性能指标在搜索结果页面上对结果进行排名时要考虑。总的来说，用户体验和搜索引擎优化都受到网页字体加载过程中不可见文本的负面影响。因此，我们应该尽快修复“确保文本在webfont加载期间仍然可见”的警告，否则，我们将需要面对很多不这样做的负面后果。

WordPress SEO审计检查清单:11个重要领域检查

如何确保文本在webfont加载期间保持可见?（WordPress修复）我们已经围绕这个问题本身以及相关的术语和概念进行了很好的讨论。现在让我们深入研究这个问题的解决方案或修复方法。WordPress有两种方法来解决这个问题。一种是手动修复，另一种是使用WordPress插件修复。下面让我们简要探讨一下这两种方法。有多种手动方法，通过这些方法你可以尝试确保在网页字体加载过程中文本仍然可见。下面列出并描述了其中一些主要的。

1。指定一个备用字体

处理这个问题的一个好方法是指定一个备用字体，直到网页字体完成加载。实现它也很简单。你所需要做的就是在网站的样式表（CSS）中添加一个CSS规则，将字体族属性设置为常用的系统字体，例如Arial或Helvetica或任何设备可用的无衬线字体。下面的代码片段向您演示在CSS文件中应用什么CSS规则。

我们之前已经讨论过不同的字体显示属性，即swap, fallback和optional，如何帮助我们防止FOIT，因此，它们帮助我们摆脱警告“确保文本在webfont加载期间仍然可见”。如果您想了解更多细节，请再次向上滚动到该部分。

3。预加载网页字体

这是一种有效的技术，因为通过预加载网页字体，你可以下载它并事先使其可用，这样就不会在加载页面时消耗加载网页字体的时间。实现这个非常简单。您所需要做的就是在HTML文档的头部添加一个指向字体文件的link元素。让我们看一段代码片段，它直观地向我们展示了在HTML文档的头部添加什么链接元素。

使用系统字体

当你使用网页字体时，整个问题就出现了，对吗?那么，我们把网页字体作为主要字体，而把系统字体（在终端用户的设备上已经可用的字体）作为主要字体怎么样?这将简单地消除这个问题。但这是有代价的。系统字体有时不是很美观，所以您需要处理这个小小的权衡。但这是固执己见的，因为这一切都归结于你的偏好和网页内容的类型，你的网站有。通过使用系统字体，我们可以确保即使网页字体需要更长的加载时间，文本仍然可见。下面的代码片段向我们展示了如何修改CSS文件以添加系统字体列表作为默认主字体。

使用字体子集

字体子集是网页字体的自定义版本，只包括特定网页上使用的字符。通过减小字体的文件大小，字体子集可以帮助网页字体更快地加载，并减少文本在加载过程中消失的机会。一些网页字体服务，比如Google Fonts，提供了生成字体子集的选项。总而言之，通过使用上述任何一种或多种手动技术，您可以确保在web字体加载期间文本仍然可见。

WordPress插件可以是一个很好的选择，如果你不想走手动路线，想要一个合适的插件来解决过程中看不见的文本网页字体加载问题。有很多不错的插件可供选择，但我们建议你选择最好的一个，10Web Booster。使用10Web Booster，您不需要编写任何代码，该插件开箱即用，并自动优化字体加载。它使用各种优化技术，包括以下内容，来解决网页字体加载过程中不可见的文本问题:

关键字体加载-默认启用，在大多数情况下，可以单独解决问题。字体交换-默认禁用。字体延迟加载-默认禁用。第一种优化技术，即关键字体加载通常足以解决问题，但在某些情况下可能不会使用它。让我们看看一些情况，在这些情况下，关键字体加载不是一种理想的实现技术。



1。如果你使用的网页字体有多种字体大小和样式，它可能需要更长的时间来加载所有必要的字体文件，即使是关键的字体加载。在这种情况下，可以使用字体交换来临时显示备用字体，直到加载所需的字体。这确保了文本对用户总是可见的，即使在网页字体正在加载时也是如此。

  

如果你的网站有很多内容，关键字体的加载可能需要更长的时间，用户可能会遇到看到任何文本的延迟。在这种情况下，字体延迟加载可以用于在用户滚动浏览内容时按需加载字体。这种技术可以帮助减少初始页面加载时间，确保用户可以更快地访问内容。



如果网页字体不是你网站的关键组成部分，它的缺失不会对用户体验产生重大影响，那么你可以使用字体交换将其替换为系统字体或网络安全字体。这确保了文本总是可见的，即使网页字体无法加载。因此，在这样一些用例中，可以使用技术2和3来解决问题。想要加速你的网站立即?

获得90+页面速度得分自动与10Web助推器在任何主机上!免费开始 不需要信用卡 仍然无法解决webfont加载问题?（常见问题已修复）除了上面的解决方案，如果你仍然面临网页字体加载问题，并且遇到以下任何一个常见问题，那么这一节将值得你一读。当使用一些自定义的谷歌网页字体时，你可能会遇到同样的警告“确保文本在网页字体加载期间仍然可见”。这通常是因为字体在显示之前需要先下载和加载字体文件，下载时间可能很长，甚至字体可能无法加载，从而导致内容的文本可能不可见或以后备字体显示。要解决这个问题，可以使用以下方法。我们在前面的小节中介绍了它们。使用“font-display”属性使用系统字体或网络安全字体作为备用字体通过使用字体子集来减小字体文件大小确保文本在webfont加载期间仍然可见- font Awesome

为图标选择合适的web字体完全取决于您。它可以是字体Awesome，材料符号或本地图标集。然而，无论你使用什么字体库，只要确保字体经过良好优化，正确快速地加载，并且不会引起任何明显的错误或警告，例如“确保文本在webfont加载期间仍然可见”。

字体很棒的字体也可以处理和使用的方式，你不会得到这个警告。当使用Font Awesome时，你可以使用以下技巧来摆脱这个警告。1。使用Font Awesome的异步加载脚本

Font Awesome为我们提供了一个异步加载脚本，将网页字体与其他网页内容分开加载，这有助于防止阻塞文本渲染。您可以通过在HTML文件的头部部分添加以下脚本来简单地实现此脚本方法。   



注意:你需要用你的字体Awesome工具包ID替换“your_kit_id”。2。在字体堆栈

中定义回退字体让我们假设由于某种原因，font Awesome网页字体无法加载或被阻止。现在在这种情况下，我们需要一些备用字体来显示，而不是由于任何已知或未知的原因而无法加载的网页字体。您可以在字体堆栈中定义回退字体列表。它们可以是大多数设备上可用的系统字体或网络安全字体。   











添加这样一个后退字体将显示一些字符而不是字体awesome，例如字母“i”，让我们看看我们如何在一小段代码的帮助下做到这一点。不是很好，但聊胜于无，至少它会表明一些图标在那里。3。另一个解决方案可能是预加载字体Awesome CSS，这样网页字体加载速度更快，减少FOUT （Flash of Unstyled Text）的机会。下面的代码片段演示了如何通过链接标签脚本预加载Font Awesome CSS。

“kdsim20”



通过使用值为“style”的“as”属性，字体Awesome CSS将作为样式表预加载。一般来说，这个警告只适用于网页字体，但让我们假设你仍然看到这个警告，尽管使用本地字体，那么下面的步骤可能会帮助你摆脱警告。1。你可以使用像FontFaceObserver这样的字体加载库来异步加载你的本地字体，这意味着字体将在后台加载，而文本将使用备用字体显示。这将确保文本在字体加载期间保持可见。

2。大型字体文件可能需要很长时间才能加载，这可能会延迟文本的呈现。您可以通过使用字体子集工具（如FontSquirrel）从字体文件中删除任何不必要的字符来减小本地字体的大小。

3。使用CDN

使用CDN可以被证明是一个聪明的技术。它们将网页内容分布在多个服务器上，从而加快了加载时间，从而提高了网站的性能和可靠性。本地字体也可以通过CDN缓存和存储，就像本地CSS和JS文件、本地图像或整个网页一样。通过CDN加载的内容通常比从网站服务器加载的内容要快。综上所述，CDN可以成为一种非常有效的技术，可以帮助解决本地字体的“确保文本在webfont加载期间仍然可见”警告。

最好的CDN为WordPress:哪一个更适合你?WordPress CDN -如何提高网站加载时间与CDN

大多数设备都预装了系统字体，加载速度通常比网页字体或本地字体快。使用系统字体堆栈，您可以确保网站上的文本始终可见，即使字体文件无法加载。如果你遵循这些技术，希望你能摆脱“确保文本在webfont加载期间仍然可见”的警告，即使使用本地字体。总而言之，这个警告是非常重要的，因为我们已经看到了它对许多事情的负面影响，包括SEO, UX，我们的pagespeedinsights核心，等等。因此，通过遵循我们讨论的任何合适的方法来修复此警告，我们可以得到解除灯塔警告。但是如果你不想自己动手做这些麻烦的事情，那么我们的10Web Booster插件应该是你解决这个警告的一个很好的选择。想要加速你的网站立即?

获得90+页面速度得分自动与10Web助推器在任何主机上! 不需要信用卡，想要加快你的网站立即?

获得90+页面速度得分自动与10Web助推器在任何主机上! 不需要信用卡 常见问题

在webfont加载期间看不见的文本影响了什么核心网络生命?LCP（最大内容绘制）和CLS（累积布局移位）都受到网页字体加载过程中不可见文本的不利影响。然而，与CLS相比，LCP受不可见文本的影响更大。什么是网页字体?webfont是一种在用户系统上不可用的字体，需要从服务器上下载，由web浏览器呈现，以便在网站上显示文本。Web字体的各种格式包括TrueType （.ttf）、OpenType （.otf）和Web Open Font Format （.woff）。

什么是隐形文本的闪光?闪烁的不可见文本也被称为FOIT是一个短暂的时刻，当文本出现不可见或空白的网页上，而自定义的网页字体正在被浏览器下载。用户觉得这很令人沮丧，而且会对他们的网站体验产生负面影响，尤其是在网速较慢或字体较大的情况下。我如何优化网页字体?有多个步骤，你可以遵循优化网页字体。下面列出了其中的一些。使用网页字体服务，优化字体传递和减少加载时间，如谷歌字体或Typekit。使用字体子集只包括你的网站所需要的字符和样式，减少字体文件的大小。3. 使用gzip或类似的压缩工具压缩字体文件以减小其大小。4. 在CSS代码中使用font-display属性来控制字体在加载期间的显示方式，以防止FOIT或FOUT。5. 将字体文件托管在快速可靠的服务器上以减少下载时间。这些是一些主要的可能的方法，可以帮助你优化网页字体。我应该用TTF还是WOFF还是OTF?

这个问题没有固定的答案，因为它涉及到最适合你的特定需求和目标，你想要使用的字体，你想要支持的浏览器，以及许可或法律方面的考虑。每种格式都有自己的优点和缺点，在做出选择时应该考虑到这些。一般来说，对于web，最好使用woff或woff 2，因为它们的尺寸较小。参考https://caniuse.com/woff。你应该预加载字体吗?

预加载字体可以帮助解决这个问题，但它有一些权衡:字体应该下载，这与网络速度竞争。因此，LCP和其他指标可能会受到影响。因此，虽然它可以帮助解决问题，但它也可能有副作用。更好的解决方案可能是使用字体交换。web字体加载对性能的影响是什么?

Webfont加载会显著影响网站的性能。它增加了整体文件大小并增加了加载时间，从而导致更高的跳出率，更低的参与度和更低的转换。为了优化性能，提高网页字体加载速度至关重要。您可以使用最小化字体文件大小、设置字体子集、压缩字体文件以及实现一种字体加载方法来防止不可见文本（FOIT）和无样式文本（FOUT）的闪烁等技术。无样式文本的闪光是什么?

当网页字体用于网页上的文本样式时，有时字体文件的加载时间比页面的其他部分要长，这可能导致未样式文本的闪烁（FOUT）的发生。之所以会出现这种情况，是因为浏览器最初使用替代字体显示文本，而这种字体可能不存在与页面的预期设计相匹配。一旦字体文件被加载，浏览器就会用预期的字体替换替代字体，从而在页面上的文本外观上引起明显和分散注意力的变化