在CSS中避免重绘吗?

Question

我正在为一个Beaver Builder/WordPress网站减少最大的内容油漆。我遇到了一些问题，标题文本被重新绘制较晚，导致高LCP得分，尽管文本几乎立即可见和样式。

我试过将主题字体移动到<style>标签的头部，我用重要的标记了它们，但我不知道这是否在做任何事情。我在本地托管了预加载的Google字体。

<style>
html, body{
    font-family: Poppins, sans-serif !important;
}
    
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6, 
.fl-heading-text,
input[type="button"], input[type="submit"], [role="button"]{
  font-family: 'Teko', sans-serif !important;
}
</style>

我可以看到我的主题是加载系统字体作为一个字体家族稍后通过!important被覆盖，但我想知道这是否避免了重绘?

Answer 1

!important不会避免重绘任何其他CSS(除了它可能不太可能被后来加载的CSSO覆盖)。特别是这种情况下，你正在使用网页字体，所以说，使用网页字体('Poppins'或'Teko')，当他们被加载，并在此期间退回到默认的san-serif。

这篇文章给出了更多关于如何改善网页字体加载的细节:https://web.dev/font-best-practices/