我正在使用MathJax在设计用于在移动设备(例如iPhone)上查看的页面上呈现数学符号。当我使用meta标签时
<meta name="viewport" content="user-scalable=no, width=device-width" />
这以某种方式引起了问题。 MathJax不会加载Web字体,而是使用劣等的图像字体。如果我显式设置的像素宽度大于某个截止值,则此问题将消失。如果我设置
<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版中已解决的问题。 Beta版可从http://devel.mathjax.org/mathjax/dpvc/v2.0-candidate/MathJax.js获得,因此您可以尝试一下,看看是否更适合您?
另请参见MathJax用户论坛上的discussion。建议的解决方法是
<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>
它更改了在检测Web字体时要使用的字体大小。
关于javascript - 具有设备宽度的iPhone上的mathJax产生图像字体,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/9347045/