为MATHJAX 2.7.1正确@font-face{}，以避免"确保文本在网页字体加载期间保持可见"错误

Question

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

以下网址导致“确保文本在网络字体加载期间保持可见”错误：

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>

Answer 1

您可以使用字体显示：swap 在你的CSS中。这样可以防止在渲染期间出现阻塞，文本将保持可见。

* {
    font-display: swap;
}

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