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

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

html css fonts

Html MathJax：使用某些Google字体时，表达式的大小不正确,html,css,fonts,mathjax,google-webfonts,Html,Css,Fonts,Mathjax,Google Webfonts,我正在尝试创建一个包含一些数学知识的HTML文件，该文件将使用MathJax进行渲染。然而，当使用谷歌字体（在我的例子中是Lusitana）时，数学表达式的大小是错误的。当使用安装在计算机上的普通字体或其他一些Google字体时，它们会正确显示。我真的很想使用Lusitana-有什么方法可以让它工作吗编辑1：我的平台是Ubuntu 16.04，Chrome 62。这个问题不会发生在Firefox上以下是使用字体Lusitana呈现以下源代码的方式：产生问题的HTML源是： <html

我正在尝试创建一个包含一些数学知识的HTML文件，该文件将使用MathJax进行渲染。然而，当使用谷歌字体（在我的例子中是Lusitana）时，数学表达式的大小是错误的。当使用安装在计算机上的普通字体或其他一些Google字体时，它们会正确显示。我真的很想使用Lusitana-有什么方法可以让它工作吗

编辑1：我的平台是Ubuntu 16.04，Chrome 62。这个问题不会发生在Firefox上

以下是使用字体Lusitana呈现以下源代码的方式：

产生问题的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>


@导入url（'https://fonts.googleapis.com/css?family=Open+Sans'）；
@导入url（'https://fonts.googleapis.com/css?family=Lato'); 
@导入url（'https://fonts.googleapis.com/css?family=Lusitana'); 
身体{
字体系列：“卢西塔纳”，巴斯克维尔加拉蒙德，“新罗马时代”，衬线；
/*字体系列：“开放无”，加拉蒙德，巴斯克维尔，“时代新罗马”，衬线*/
}
p{
字体大小：20px；
}
window.MathJax={
tex2jax：{
inlineMath:[['$'，'$']，[“\\（“，“\\）”]，
processEscapes：正确
},
};

二次方程的根，$$ax^2+bx+c=0$由，$$x=\dfrac{-b\pm\sqrt{b^2-4ac}}{2a}$$给出。表达式$\sqrt{b^2-4ac}$称为方程的判别式。如果其值为$0$，则根相等，否则根不同。此外，如果判别式为正，则根为实；如果为负，则根为复。

这是因为Lusitana的元数据不正确

从[此帖子]（这可能会有帮助：）：

MathJax通过尝试将MathJax字体的ex高度与周围字体的ex高度相匹配来确定缩放因子。仅当周围字体的“ex height”设置正确时，此选项才有效。并不是所有的免费字体，特别是不是所有的谷歌网页字体都有合适的ex高度。“深红色文本”似乎就是这样一种字体。要查看此信息，请添加

<span style="display:inline-block; width:1ex; height:1ex; background-color:red"></span>

这将防止字体变小，但可能意味着计算结果与文本其余部分的字体高度不匹配。或者，您可以将最小字体比例更改为95%左右（或任何合适的比例）：

看看是不是其中一个没用

测试

@导入url（'https://fonts.googleapis.com/css?family=Open+Sans'）；
@导入url（'https://fonts.googleapis.com/css?family=Lato'); 
@导入url（'https://fonts.googleapis.com/css?family=Lusitana'); 
卢西塔纳先生{
字体系列：“卢西塔纳”，巴斯克维尔加拉蒙德，“新罗马时代”，衬线；
}
.opensans{
字体系列：“开放无”，加拉蒙德，巴斯克维尔，“时代新罗马”，衬线；
}
p{
字体大小：20px；
}

卢西塔纳：

opensans:

在html标题标记之后，在指向MathJax的链接之前，我做了：

MathJax.Hub.Config（{“html-CSS”：{minScaleAdjust:100}，SVG:{minScaleAdjust:100}，CommonHTML:{minScaleAdjust:100}）
MathJax.Hub.Config({
  "HTML-CSS": {matchFontHeight: false},
  SVG: {matchFontHeight: false},
  CommonHTML: {matchFontHeight: false}
});

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