Question

我正在尝试使用MathJax创建一个带有一些数学的HTML文件。但是，当使用谷歌字体（在我的情况下，Lusitana）时，数学表达式的大小错误。使用计算机上安装的普通字体或其他某些Google字体时，它们会正确显示。我真的很想使用Lusitana - 有什么方法可以让它发挥作用吗？

编辑1：我的平台是Ubuntu 16.04，Chrome 62. Firefox上没有这个问题。

以下是使用字体Lusitana查看下面的源代码的方式：https://imgur.com/a/OiBmr

产生问题的HTML源代码是：

<html>
<head>
<style>
 @import url('https://fonts.googleapis.com/css?family=Open+Sans');
 @import url('https://fonts.googleapis.com/css?family=Lato'); 
 @import url('https://fonts.googleapis.com/css?family=Lusitana'); 

body {
    font-family: "Lusitana", Garamond, Baskerville, "Times New Roman", serif;
    /* font-family: "Open Sans", Garamond, Baskerville, "Times New Roman", serif; */
}

p {
    font-size: 20px;
}
        </style>
        <script type="text/javascript">
window.MathJax = {
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"] ],
        processEscapes: true
    },
};
        </script>
        <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML">
        </script>
    </head>
    <body>
        <p>
        The roots of a quadratic equation, $ax^2 + bx + c = 0$ are given by, $$x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$ The expression $\sqrt{b^2 - 4ac}$ is called the discriminant of the equation. If its value is $0$, then the roots are equal, otherwise the roots are distinct. Furthermore, if the discriminant is positive, the roots are real, and if negative, the roots are complex.
        </p>
    </body>
</html>

Answer 1

这是因为Lusitana的元数据不好。

来自[此帖子]（这可能会有所帮助：https://groups.google.com/d/msg/mathjax-users/v3W-daBz87k/xjxFFdfQBQAJ）：

MathJax通过尝试将MathJax字体的ex高度与周围字体的ex高度相匹配来确定缩放因子。只有在周围的字体正确设置了ex-height时才有效。并非所有免费字体，特别是并非所有Google网络字体都具有适当的高度。似乎“Crimson Text”就是这样一种字体。要查看此内容，请添加
<span style="display:inline-block; width:1ex; height:1ex; background-color:red"></span>
进入使用Crimson Text格式化的段落（您甚至可以完全删除MathJax以验证它与MathJax没有任何关系）。您应该在文本旁边看到一个非常小的红色框（当它应该与文本中的“x”一样高）。

因此，MathJax尝试缩放其字体，使“x”与红色框一样高。但MathJax有一个配置参数，它限制了它将使用的刻度小，即50％，这就是为什么你看到的字体恰好是原始尺寸的一半。

一种可能的解决方案是告诉MathJax不要试图匹配周围的字体。您可以通过在各种输出渲染器的配置中设置matchFontHeight：false来实现：

MathJax.Hub.Config({
  "HTML-CSS": {matchFontHeight: false},
  SVG: {matchFontHeight: false},
  CommonHTML: {matchFontHeight: false}
});

这样可以防止字体变小，但可能意味着数学与文本其余部分的字体高度不匹配。或者，您可以将最小字体比例更改为95％（或任何可用的）：

MathJax.Hub.Config({
  "HTML-CSS": {minScaleAdjust: 95},
  SVG: {minScaleAdjust: 95},
  CommonHTML: {minScaleAdjust: 95}
});

看看其中一个是不是可以做到这一点。

测试。

 @import url('https://fonts.googleapis.com/css?family=Open+Sans');
 @import url('https://fonts.googleapis.com/css?family=Lato'); 
 @import url('https://fonts.googleapis.com/css?family=Lusitana'); 

.lusitana {
    font-family: "Lusitana", Garamond, Baskerville, "Times New Roman", serif;
}
.opensans {
    font-family: "Open Sans", Garamond, Baskerville, "Times New Roman", serif; 
}

p {
    font-size: 20px;
}

	<p class="lusitana">Lusitana: <span style="display:inline-block; width:1ex; height:1ex; background-color:red"></span></p>
  <p class="opensans">OpenSans: <span style="display:inline-block; width:1ex; height:1ex; background-color:red"></span></p>

MathJax：使用某些Google字体时，表达式的大小不正确

1 个答案: