font-face 和闪烁字体答案

【问题标题】：font-face and blinking fontsfont-face 和闪烁字体
【发布时间】：2020-11-10 08:54:05
【问题描述】：

我正在尝试为客户开发一个网站 - 我遇到了一件奇怪的事情 - 我的字体可以说是在闪烁。更准确地说 - 并非总是如此 - 但主要是当我进入另一个子页面时 - 在页面显示标题上的自定义字体之前，我们可以看到默认字体仅一秒钟。这会产生不良影响。

我正在使用从最新版本的 scss 重新编译的 Bulma，以及名为 Museo Sans 的字体 - 我从我的服务器（而不是 Google）提供该字体。当我运行 GtMetric 时，字体读取没有延迟，并且我还使用了淡入脚本，这对所描述的效果有所帮助，但它仍然是可见的。此外，该站点相对较小，因此不会因请求数量或脚本大小而产生延迟。

我的猜测是它可能与我的 css 的顺序有关。我从 font-face 声明加载字体开始，然后我去基本的 mixins 并重置。我尝试了很多东西，但没有结果。我必须补充一点，这不是我使用该特定设置创建的第一个站点 - wordpress、bulma、scss。

该网站的开发版本在这里：

https://protonads.mediamachina.net/

这里的css：

https://protonads.mediamachina.net/wp-content/themes/proton/proton.css

感谢您的任何建议。

【问题讨论】：

尝试将字体元标记作为内联硬编码 css 右下方移动到头顶。和相关的CSS。它应该可以解决问题
我想继续使用自托管字体。
你仍然可以，直接从头部加载它会先处理
听起来像“无样式文本的闪光”（“FOUT”）或“内容”（“FOUC”）。见stackoverflow.com/questions/48591817/…
谢谢彼得 - 这似乎是深入挖掘并寻找答案的好方向。

标签： html css wordpress fonts

【解决方案1】：

在阅读了一些互联网资源后，我得到了答案。因此，包括来自外部源或本地的字体，带有 font-display: swap;将有两个结果 - FOUT - 因为我们在浏览器下载字体后交换字体，第二 - 加载时间有点慢，因为我们让他的网站阻止渲染，直到他的字体被加载。

很遗憾，没有好的选择。或者至少我找不到好的选择。

  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(''),
         url('inter-v2-latin-ext_latin-regular.woff2') format('woff2'), 
         url('inter-v2-latin-ext_latin-regular.woff') format('woff'); 
  }

【讨论】：