设备宽度的iphone上的mathJax产生图像字体

mathJax on iphone with device width yields image fonts

本文关键字：mathJax 图像 字体 上的 iphone      更新时间：2023-09-26

我正在使用MathJax在一个专为在移动设备（比如iphone）上查看而设计的页面上呈现数学符号。当我使用元标签

<meta name="viewport" content="user-scalable=no, width=device-width" />

这在某种程度上造成了一个问题。MathJax不加载网络字体，而是依赖于图像字体，因为图像字体较差。如果我明确地设置了一个大于某个截止值的像素宽度，这个问题就消失了。如果我设置

<meta name="viewport" content="user-scalable=no, width=360px" />

例如，它可以毫无问题地加载web字体。所以我想知道。。。有一个优雅的解决方案吗？我不想使用绝对宽度，但在我的书中，用网络字体渲染的页面是一个更高的优先级。

以下是一个在这方面失败的页面示例：

<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那么你能试一下，看看这对你是否更有效吗？

另请参阅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>

其在检测网页字体时改变要使用的字体大小。

相关文章：