更正 MATHJAX 2.7.1 的 @font-face { } 以避免“确保文本在 Webfont 加载期间保持可见”错误答案

【问题标题】：Correct @font-face { } for MATHJAX 2.7.1 to avoid a "Ensure text remains visible during Webfont load" error更正 MATHJAX 2.7.1 的 @font-face { } 以避免“确保文本在 Webfont 加载期间保持可见”错误
【发布时间】：2022-01-13 09:38:54
【问题描述】：

我在我的博客网站上使用 Mathjax 2.7.1。它可以很好地显示方程。但是，当我检查网页的性能时，我在 Google PageSpeed Insights 中遇到错误。

以下 URL 导致 “确保文本在 Webfont 加载期间保持可见” 错误：

https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/fonts/HTML-CSS/TeX/woff/MathJax_Main-Regular.woff?V=2.7.1

https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/fonts/HTML-CSS/TeX/woff/MathJax_Math-Italic.woff?V=2.7.1

https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/fonts/HTML-CSS/TeX/woff/MathJax_Size1-Regular.woff?V=2.7.1

如何消除此错误？ Mathjax 2.7.1 的正确 @font-face{ } 是什么？

我正在使用以下脚本来启用我网站中的功能：

<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js' type='text/javascript'>
    MathJax.Hub.Config({
    extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
        displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
    },
    "HTML-CSS": { availableFonts: ["TeX"] }
    });
</script>

【问题讨论】：

标签： html css mathjax

【解决方案1】：

您可以在 CSS 中使用 font-display: swap;。这可以防止在渲染过程中出现阻塞，并且文本将保持可见。

* {
    font-display: swap;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

【讨论】：

在CSS中加入这一行并不能达到目的。我使用了另一个字体名称“Fontawesome”。对于这个字体，我使用了 CSS 块：@font-face { font-family: "FontAwesome";字体粗细：正常；字体显示：交换；字体样式：正常； src: url("maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/…) 格式("woff2"); }
因此，mathjax 需要一个适当的 @font-face{} 块。