ARV*_*ARV 3 html css fonts mathjax google-webfonts
我正在尝试创建一个包含一些数学内容的 HTML 文件，该文件将使用 MathJax 进行渲染。然而，当使用谷歌字体（在我的例子中，Lusitana）时，数学表达式的大小错误。当使用计算机上安装的普通字体或其他一些 Google 字体时，它们会正确显示。我真的很想使用 Lusitana - 有什么办法让它发挥作用吗？
编辑1：我的平台是Ubuntu 16.04，Chrome 62。该问题不会发生在Firefox上。
以下是使用 Lusitana 字体呈现的以下源代码的外观： https: //i.stack.imgur.com/M5bML.jpg
产生问题的 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>
这是因为 Lusitana 的元数据不正确。
\n\n来自[此帖子]（这可能有帮助：https://groups.google.com/d/msg/mathjax-users/v3W-daBz87k/xjxFFdfQBQAJ）：
\n\n\n\n\nMathJax 通过尝试将 MathJax 字体的前高度与周围字体的前高度相匹配来确定缩放因子。仅当周围字体的前高度设置正确时才有效。并非所有免费字体，特别是并非所有 Google 网络字体，都有适当的前高度。看来 \xe2\x80\x9cCrimson Text\xe2\x80\x9d 就是这样一种字体。要查看此内容，请添加
\n\nRun Code Online (Sandbox Code Playgroud)\n\n<span style="display:inline-block; width:1ex; height:1ex; background-color:red"></span>\n进入用 Crimson Text 格式化的段落（您甚至可以完全删除 MathJax 以验证它与 MathJax 没有任何关系）。您应该在文本旁边看到一个非常小的红色框（当它应该与字体中的 \xe2\x80\x9cx\xe2\x80\x9d 一样高时）。
\n\n因此 MathJax 尝试缩放其字体，以使 \xe2\x80\x9cx\xe2\x80\x9d 与红色框一样高。但 MathJax 有一个配置参数，限制其使用的比例大小，即 50%，因此这就是为什么您看到的字体恰好是原始大小的一半。
\n\n一种可能的解决方案是告诉 MathJax 不要尝试匹配周围的字体。您可以通过在各种输出渲染器的配置中设置 matchFontHeight:false 来实现这一点：
\n
MathJax.Hub.Config({\n "HTML-CSS": {matchFontHeight: false},\n SVG: {matchFontHeight: false},\n CommonHTML: {matchFontHeight: false}\n});\n\n\n\n这将防止字体变小，但可能意味着数学与文本其余部分的字体高度不匹配。或者，您可以将最小字体比例更改为 95%（或任何有效的值）：
\n
MathJax.Hub.Config({\n "HTML-CSS": {minScaleAdjust: 95},\n SVG: {minScaleAdjust: 95},\n CommonHTML: {minScaleAdjust: 95}\n});\n\n\n\n看看其中之一是否能解决问题。
\n
测试。
\n\n<span style="display:inline-block; width:1ex; height:1ex; background-color:red"></span>\nMathJax.Hub.Config({\n "HTML-CSS": {matchFontHeight: false},\n SVG: {matchFontHeight: false},\n CommonHTML: {matchFontHeight: false}\n});\n| 归档时间： |
|
| 查看次数： |
1375 次 |
| 最近记录： |