我正在使用 MathJax 在专为在移动设备(例如 iPhone)上查看而设计的页面上呈现数学符号。当我使用元标记时
<meta name="viewport" content="user-scalable=no, width=device-width" />
这会以某种方式导致问题。 MathJax 不加载网络字体，而是依赖图像字体，这是较差的。如果我明确设置大于某个截止值的像素宽度，这个问题就会消失。如果我设置
<meta name="viewport" content="user-scalable=no, width=360px" />
例如，它可以毫无问题地加载网络字体。所以我想知道......是否有一个优雅的解决方案？我不想使用绝对宽度，但在我的书中，使用网络字体呈现的页面具有更高的优先级。
以下是在这方面失败的页面示例:
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width" />
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
src="https://d3eoax9i5htok0.cloudfront.net/mathjax/latest/MathJax.js?config=TeX- AMS-MML_HTMLorMML">
</script>
</head>
<body>
<span style="color:green">
$$\sum_{n=0}^\infty x^n$$
</span>
</body>
</html>
最佳答案
我相信这个问题在 MathJax 2.0 版本中已得到解决。测试版可在 http://devel.mathjax.org/mathjax/dpvc/v2.0-candidate/MathJax.js 获取。那么您可以尝试一下，看看是否更适合您？
另请参阅discussion在 MathJax 用户论坛上。建议的解决方法是
<script type="text/x-mathjax-config">
MathJax.Hub.Register.StartupHook("HTML-CSS Jax Ready", function () {
var HTMLCSS = MathJax.OutputJax["HTML-CSS"];
HTMLCSS.Font.testSize = ["10px","12px","15px","9px","8px"];
document.getElementById("MathJax_Font_Test").style.fontSize = "10px";
});
</script>
这会更改检测网络字体时使用的字体大小。
关于javascript - iPhone 上的 mathJax 与设备宽度产生图像字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9347045/