MathML简介
Mathematical Markup Language (MathML) 是一个用于描述数学公式、符号的一种 XML标记语言。MDN上的资料:MathML | MDN,浏览器兼容性:Can I use: MathML,目前主流的现代浏览器都支持MathML,Chrome在109版本(2023年1月10日)感天动地正式支持了MathML(虽然是有点区别的MathML Core),与此同时Firefox和Safari早在八百年前就已经支持了MathML。
通常在浏览器中显示MathML公式需要额外的工具(例如MathJax),而浏览器原生支持MathML理论上就不再需要这些工具了。
MathML的字体问题
相关文档:Fonts for MathML – MathML | MDN。在Windows中默认使用的是Cambria Math字体,office中的公式也是默认使用的这个字体。对于安卓,由于没有自带的数学OpenType字体,实际调用系统默认的字体,显示相当拉跨。因此最好是网页能够内嵌字体。推荐使用的是 Latin Modern Math和STIX Two MathX字体,对<math>
标签指定字体即可。
math {
font-family: 'STIX Two Math';
}
MathML的换行问题
在Chrome中,如果容器太小不会导致<math>
标签中的数学公式换行而是直接溢出,而且这个溢出也很离奇,它的宽度比公式的实际宽度小,因此使用<table>
之类的时候会全部挤在一起,就像这个样子:
而在Firefox中就没有这个问题,Firefox会默认换行。
这个玩意也是很神奇,试了好几个css像overflow-wrap、word-break都不行,只有white-space才可以。
math {
white-space: nowrap;
}
加了这个css之后公式就不会因为空间小换行了,更神奇的是chrome挤在一起的问题也解决了(汗)。