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

Question

我正在尝试创建一个 HTML 文件，其中包含一些将使用 MathJax 呈现的数学。但是，当使用 google 字体（在我的例子中是 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 [=11=]$, 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 determines the scaling factor by trying to match the ex-height of the MathJax fonts to the ex-height of the surrounding font. That only works if the surrounding font has the ex-height properly set. Not all free fonts, and in particular, not all Google web fonts, have proper ex-heights. It appears that “Crimson Text” is one such font. To see this, add
<span style="display:inline-block; width:1ex; height:1ex; background-color:red"></span>
into the paragraph formatted with Crimson Text (you can even remove MathJax entirely to verify that it doesn’t have anything to do with MathJax). You should see a very small red box next to the text (when it should be as tall as an “x” in the font).

So MathJax tries to scale its fonts so that the “x” is as high as the red box. But MathJax has a configuration parameter that limits how small a scale it will use, and that is at 50%, so that is why you see the font at exactly half the original size.

One possible solution is to tell MathJax not to try to match the surrounding font. You do that by setting matchFontHeight:false in the configuration for the various output renderers:

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

This will keep the font from getting tiny, but may mean the math doesn’t match the font height of the rest of the text as well as it might. Alternatively, you could change the minimum font scale to be something like 95% (or whatever works):

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

See if one of those doesn’t do the trick.

测试。

 @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 字体时表达式大小不正确

MathJax: expressions are sized incorrectly when using certain Google fonts

html

css

fonts

mathjax

google-webfonts