☰

有没有办法使用 Open Type 字体在纯 HTML/CSS 中呈现 TeX 公式？

tag-icon • tag-icon fonts html opentype latex2html
有没有办法使用 Open Type 字体在纯 HTML/CSS 中呈现 TeX 公式？

有没有一种方法可以将 TeX 文档转换为 HTML，而不是依赖 JavaScript、SVG、HTML Canvas 或图像来渲染公式，而仅仅依赖 HTML、CSS 和 OTF 字体？

在[有哪些 OpenType Math 字体可用？]列出的许多字体都带有数学符号和字形，但是是否有任何 OTF 智能字体可以使用连字、变体、大写字母、花饰，或许借助一些额外的 CSS 等，将其渲染$\sum_i^j为 $\sum_i^j$ 或$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$$\sum_{i=0}^ni^2 = \frac{(n^2+n)(2n+1)}{6}$？

答案1

是的，使用该dvisvgm工具，您可以将 TeX 的 DVI 输出渲染为 SVG。例如

\documentclass{article}
\pagestyle{empty}
\begin{document}
\[ R_{\mu\nu} - \frac{1}{2} R g_{\mu\nu} + \Lambda g_{\mu\nu} = \frac{8 \pi G}{c^4} T_{\mu\nu} \]
\end{document}

然后运行

$ pdflatex --output-format=dvi test.tex
$ dvisvgm --font-format=woff test.dvi

这将为您提供以下 SVG 输出。字体已以 base 64 子集嵌入。

<?xml version='1.0' encoding='UTF-8'?>
<!-- This file was generated by dvisvgm 2.6.3 -->
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='142.407868pt' height='20.381467pt' viewBox='162.170942 73.723525 142.407868 20.381467'>
<style type='text/css'>
<![CDATA[
@font-face{font-family:cmsy10;src:url(data:application/x-font-woff;base64,d09GRgABAAAAAAPQAA0AAAAABRQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABMAAAABoAAAAchZ9Z609TLzIAAAFMAAAAQwAAAFZ2Q39nY21hcAAAAZAAAAA+AAABQgAPJb1jdnQgAAAB0AAAAAQAAAAEACEBnWdhc3AAAAHUAAAACAAAAAj//wADZ2x5ZgAAAdwAAACJAAAAkMWFZmpoZWFkAAACaAAAADIAAAA2E9299GhoZWEAAAKcAAAAHgAAACQEzwMOaG10eAAAArwAAAAQAAAAEAkbAHRsb2NhAAACzAAAAAoAAAAKAHIAVG1heHAAAALYAAAAHwAAACAASABBbmFtZQAAAvgAAADAAAABHYhQurhwb3N0AAADuAAAABYAAAAqAPYAA3jaY2BgYGQAgsvb7s0A0Te+2K6E0QBcNQhlAAB42mNgZOZknMDAysDA1Mm0m4GBoRtCM95nMGRkAooysHIyIAMHGCMgzTWFgUFJSEmIcd/f6wxRjPvAwowgAgC87gqXAHjaY2BgYGaAYBkGRgYQsAHyGMF8FgYFIM0ChEC+ktD//xDy7keoSgZGNgYYk4GRCUgwMaACRoZhDwB2iAbuAAAAIQGdAAAAAf//AAJ42mNgYlBkYGDUZNzHwMzAzqC3kZFB32YTOwvDW6ONbKx3bDYxMwGZDBuZQcKsIOFN7GyMf2w2MYLEjQUVBdWNBZUVGTmeHzvGuO+fkyJjDdA4hmCGZ0zbGPkY+BkYVI3sGE30GJUVlfgYReQYjZkmc/MAAfffxxD6GSOXEBcjmGBgYAAA66sdBgAAAHjaY2BkYGAA4p3bG6/G89t8ZeBmfg4UYbjxxXYlnFZkYGDaxrgPyOVgYAKJAgB3qAxjAAB42mNgZGBg3MfAwBDFzAkkGZi2MTAyoAIWAC/VAeQAAAMJACEAAAAAAwkAAAMJAFMAAAAqACoAKgBIAAB42mNgZGBgYGEQYGBiAAEQycgAEnNg0AMJAAAFSQCKAHjaTY09CsJAEIU/jb8oYiWW6wESsoEUWlp4AAsrG5E1BPIDm6Sw8RgewBN4RCdxEXcZ5tuZt+8BE270aE+fMUvHHhvOjofMeDoeyX3LtjeYin7RKVv22LN2PGTFw/GIOS+OGBIaMi5YOJqkyS4CB0oK6q5bURgUEQGh9J3UlZyKO/o3ifG7imSi2YpFWdSH0iZGRUGoduqaV3fdQuzHfhRqkZzE14pP2qUp+dcmcDK2SstC6UAe/0l8PfgAE/gnKnjaY2BiQAaMDOiABSzKxPAeAAG1APoAAA==) format('woff');}
@font-face{font-family:cmr10;src:url(data:application/x-font-woff;base64,d09GRgABAAAAAAXcAA0AAAAAB1gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABMAAAABoAAAAchZ9Z609TLzIAAAFMAAAARAAAAFZWJGKQY21hcAAAAZAAAABhAAABYgWZDghjdnQgAAAB9AAAAAQAAAAEACECeWdhc3AAAAH4AAAACAAAAAj//wADZ2x5ZgAAAgAAAAJLAAACkCePSJNoZWFkAAAETAAAADIAAAA2E/i+sGhoZWEAAASAAAAAHgAAACQF+QLAaG10eAAABKAAAAAkAAAAJBFdAWZsb2NhAAAExAAAABQAAAAUAjIC/m1heHAAAATYAAAAHwAAACAATgBibmFtZQAABPgAAAC7AAABF/eOqxlwb3N0AAAFtAAAACUAAAA7aP/DoHjaY2BgYGQAgsvb7s0A0Te+2K6E0QBcNQhlAAB42mNgZCpgnMDAysDA1MW0h4GBoQdCMz5gMGRkAooysDIzwEAjAxIISHNNAVLazLOZ3v1nY4hiOsMQDOQzguQA62QLY3jaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGRrMxgxWDDYMs/+/x8oqs1gCOP9v/H/8v9z/0/9yYWaAAeMbAxwIUYmIMHEgKYAhccMJllYwRQbiGBnGPIAAOGkEKkAAAAAIQJ5AAAAAf//AAJ42jVRQU8TURCeedvuLi20btntAi3bvl3dbkqtZbu7JQRLlVCIiFoJBhNrJCaiRMRoNBhM9OLdiyZy8MLJGDQ0Jl7RCyHxggdPnk018Q8YW3zb4GXmfV/yvvlmPiBAATBLNoADAfLbCCfGGkIAftvbfPD7WIMj7AnbnE8Hfboh8Ph3rIE+X5SolClKBsWu5u4u2WjdoGSBycHIwRbZJ1PQC3CM2o5BJUdXJKrLRSrJtouvUKW0/dNqNynFPuuHhX0MNzvY/3+ZlU3mKc66Yxq8odglSeaHUPFs1TV000WTl8pr5x1tPG20jXRlkDyNiZXUQOuPFktxXCqm+To2K5+YTg5gHMsBl2npvCJrWLS9DhDK7BlX5ChGUKElgxd448nyqFPpi61dqS0nY4JkJPtDnHQmV6ne2hE5vJ/s7w4JC7NLxcJE1tPmV1ar/UluIKGksOBdm1h6+E0Mx97NRERgF80e/MI9Nj8EOhQAek3X8TrzBNX7b0aNq6zGO44yZkbVOEXm/RWdTbtWGqldjz+6PT2znAuXnz+em18f7v2wfkRKRq6On6rjHi0cH51yL45Gy/XTc4vVk8Pd2em7ZxfvXJj0FPFcuGfwqOJNz5VvAoEReEb2cZWlHGVX8UNhcQQPO3mv09YbqpNLVG+91SlOWdZny/JvmAYgL8gXMBjII7MscCwPtobq5tF1Sglk+xwSupnBe4FQV1gM7Kiz9pBcNzPBl6+D88YK/6CU6CIfe0Sxp7U16UeEKVmM4Ne2HAloPo4MAvwD7H2CMQB42mNgZGBgAOLUJStmxPPbfGXgZn4BFGG48cV2JZxW+L+W6SLTGSCXg4EJJAoAfdgNvAAAeNpjYGRgYDrzfy1DFDMnAxAwXWRgZEAFnABlKAO/AAABbAAhAAAAAAFNAAADCQA4AfQAWQH0ADIB9AAqAwkAOAK2ACAAAAAqACoAKgBKAG4ArgD0ARABSHjaY2BkYGDgZDBkYGYAASYgZmQAiTkw6IEEAAkgALEAeNpFjT0KwkAQhb8YjX8gVmK5F0jIBlKYysoDWFjYBVmDkB/YaOUxPIAH8JJOlkUXhvne7Js3wIwrAcMbMWXtOURx9jxhyctzJOojv8F4Lv6Vcw4csmfrecKGp+eIBW+OGCoe1JRYOJrqUZcCBzpa7q5bcRi5mpGQSi+kLjQy1z+dE7vKZKLZSUDX3g+drYzKklQV6tJYPfQ8zuMs1eI4Sail5+ZOKVkb4jkZ29+6VulExP8MLoAv+ZglLAB42mNgYsAPOIGYkYGJgY9BhEGUQZpBgZGJzScxNyklEQAPsALLAAAA) format('woff');}
@font-face{font-family:cmmi7;src:url(data:application/x-font-woff;base64,d09GRgABAAAAAATYAA0AAAAABiwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABMAAAABoAAAAchZ9Z609TLzIAAAFMAAAARQAAAFZXMmKJY21hcAAAAZQAAABJAAABSgbaAW9jdnQgAAAB4AAAAAQAAAAEACECeWdhc3AAAAHkAAAACAAAAAj//wADZ2x5ZgAAAewAAAF+AAABoK3sKY1oZWFkAAADbAAAADEAAAA2E669+2hoZWEAAAOgAAAAIAAAACQFfQHXaG10eAAAA8AAAAAUAAAAFAerAJxsb2NhAAAD1AAAAAwAAAAMALYBJG1heHAAAAPgAAAAHwAAACAASQB4bmFtZQAABAAAAAC8AAABF27NqE5wb3N0AAAEvAAAABkAAAAvAw12BHjaY2BgYGQAgsvb7s0A0Te+2K6E0QBcNQhlAAB42mNgZKpknMDAysDA1MW0h4GBoQdCMz5gMGRkAooysDIzwEATAxIISHNNAVJbmfcyvfvPxhDFNIvhGpDPCJIDAP7FDGoAAAB42mNgYGBmgGAZBkYGEHAB8hjBfBYGDSDNBqQZGZgYtjLv/f8fyAfT//3+uEPVAwEjGwOcw8gEJJgYUAEjw+AEzNQzCgBCnQpJAAAAACECeQAAAAH//wACeNpNj81u00AUhe+9Y89MBnsmdjxNRUhSxwakVGpTJ3YqSFPUBRX9QaLdtC/AhgVbJMSCDQ9RseEBEEp2bFhSqc/QB+imT1AQjCUWbK7O/XR0dA4QpAA4pAtgIGBjgbA5WwoPbosF969nS0ZOwoLV2K/xUnD8NVtizcdRGj0eR1mKjZvLS7r4/TqlMxcHxZ8hfcLv8BygzW2yMi6m1dTdXewxp+dUTrIBFzwblJNptYtVOXmUDQQ39B+sXTWtPBvmAVtff/ZqjqKbWzXqq0g2FeedjdSEjXaUhB3NQtuX8snBSSS1Jum3TB58MdxEhfzW3cfVtcAr41Gfhcq+2Wpvj4bn+0zHq3xy+uFBcHre2XtYbovUko43od7wAoAO3Qb3tVy/bCQ0ZtqzybjooU0MumFPcY7Tfz01OYO4o6Yxa0zliZL32yusUfRazaOvBzvHccsEceD5/R/v8bN0XiJkREppz+eqe/XO08HLverjTkPH0t5rvv2ZA/wFF1hAIgAAeNpjYGRgYABiz6Xr4+L5bb4ycDO/AIow3PhiuxJOK/7XYmpjmgXkcjAwgUQBYuIMbwAAAHjaY2BkYGCa9V+LIYppGwPD/49MbQxAERTACgCFKAVXAWwAIQAAAAABTQAAArYAMgI8AEkAAAAqACoAKgCMANB42mNgZGBgYGVwZ2BiAAEQycgAEnNg0AMJAAAKwwDCAHjaRY1LCsIwGIQ/rW9BXInLXKClLRTRlSsP4MKFO5FYCn1A1JXH8AAewEs6LQETfub7yWQGmHCjR3v6jFl6DjCcPQ+Z8/Y80vbVa28wlX/ROVsO2LP2PGTFy/OIGR+OWHKelFxwcLT5s7wIDjTUPDp1cli1pkTE0p3mSqVbsPF7RthNKkfCVgFN/Tg0LrcmjWKzM9eqKjbSLMzCNE7kOCnUcVdIW2X0rY3nZN29aGqTRFr+NXQB/AAlxyYUeNpjYGLAD1iBmJGBiWE6IxNTXikABdkBigAAAA==) format('woff');}
@font-face{font-family:cmr7;src:url(data:application/x-font-woff;base64,d09GRgABAAAAAAP4AA0AAAAABTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABMAAAABoAAAAchZ9Z609TLzIAAAFMAAAAQAAAAFZVWl7OY21hcAAAAYwAAABBAAABQgAPBt9jdnQgAAAB0AAAAAQAAAAEACECeWdhc3AAAAHUAAAACAAAAAj//wADZ2x5ZgAAAdwAAAC4AAAAuCNJHkxoZWFkAAAClAAAADEAAAA2Ezi+2WhoZWEAAALIAAAAHgAAACQFDgI+aG10eAAAAugAAAAQAAAAEAarAEhsb2NhAAAC+AAAAAoAAAAKAIYAVG1heHAAAAMEAAAAHwAAACAASABRbmFtZQAAAyQAAAC6AAABEZ36PrZwb3N0AAAD4AAAABYAAAAqAB4AA3jaY2BgYGQAgsvb7s0A0Te+2K6E0QBcNQhlAAB42mNgZLJknMDAysDA1MW0h4GBoQdCMz5gMGRkAooysHIywAAjAxIISHNNAVImDCZM7/6zMUQxLUKoAQC6ZAnUeNpjYGBgZoBgGQZGBhCwAfIYwXwWBgUgzQKEIL7J//8Q8v95qEoGRjYGGJOBkQlIMDGgAkYGrICZYfgAAHjKBvEAAAAAIQJ5AAAAAf//AAIAAgAhAAABKgKaAAMABwAusQEALzyyBwQA7TKxBgXcPLIDAgDtMgCxAwAvPLIFBADtMrIHBgH8PLIBAgDtMjMRIREnMxEjIQEJ6MfHApr9ZiECWAAAAgAnAAACEQKiABwAHwAAJTUjETQuASMiBwEVIRUUBisBFTYzMhc1IyImPQEDESECEW8CCQsQCv61ASYYORtkMjNkGzkYTv74pCQBvgwKBg7+NCRSHBIkBAQkEhxSAZL+kgAAeNpjYGRgYABi6cdtB+P5bb4ycDO/AIow3PhiuxJOKzIwMAkyLQJyORiYQKIAVxoLIwAAAHjaY2BkYGBaxMDAEMVkCSQZmAQZGBlQAQsAJOgBUwAAAjkAIQAAAAACOQAAAjkAJwAAACoAKgAqAFwAAHjaY2BkYGBgYVBgYGIAARDJyAASc2DQAwkAAAbZAJoAeNo1jc0KglAQhT9T+yGIVtGu+wKKCiK1aNkDuIi2ETcR/IGrQo/RA7TuORvldmE439w5ZwZY8sRhfDMWbC27HLhZ9lnztjzH4ytTx1uJfzM5R3Y5s7fss+NleS77P+RoCgYq7hjIdTFUd4ELLQ39pEYcGkVCSCR6knpQy39mu5RgqkTmMUeJt01/aU2hVRJG6qQetclE0iANkigWw1U2GjrK6Y6S1LibqzZd2TYqDqX532BM8wMldiRuAAB42mNgYkAGjAzogAUsysQgDgAA3QAiAAA=) format('woff');}
@font-face{font-family:cmmi10;src:url(data:application/x-font-woff;base64,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) format('woff');}
text.f0 {font-family:cmsy10;font-size:9.96264px}
text.f1 {font-family:cmmi10;font-size:9.96264px}
text.f2 {font-family:cmmi7;font-size:6.973848px}
text.f3 {font-family:cmr10;font-size:9.96264px}
text.f4 {font-family:cmr7;font-size:6.973848px}
]]>
</style>
<g id='page1'>
<text class='f1' x='162.170942' y='87.271122'>R</text>
<text class='f2' x='169.735473' y='88.765503'>µν</text>
<text class='f0' x='181.750627' y='87.271122'>−</text>
<text class='f3' x='192.908754' y='80.531321'>1</text>
<rect x='192.908754' y='84.581212' height='0.398484' width='4.981335'/>
<text class='f3' x='192.908754' y='94.104992'>2</text>
<text class='f1' x='199.085603' y='87.271122'>R<tspan x='206.7271'>g</tspan>
</text>
<text class='f2' x='211.478968' y='88.765503'>µν</text>
<text class='f3' x='223.494123' y='87.271122'>+<tspan x='233.456736'>Λ</tspan>
</text>
<text class='f1' x='240.375248' y='87.271122'>g</text>
<text class='f2' x='245.127116' y='88.765503'>µν</text>
<text class='f3' x='257.695737' y='87.271122'>=<tspan x='269.407331' y='80.531321'>8</tspan>
</text>
<text class='f1' x='274.38867' y='80.531321'>π<tspan x='280.425087'>G</tspan>
</text>
<rect x='269.407331' y='84.581212' height='0.398484' width='18.850864'/>
<text class='f1' x='274.442389' y='94.104992'>c</text>
<text class='f4' x='278.753786' y='91.226899'>4</text>
<text class='f1' x='289.453708' y='87.271122'>T</text>
<text class='f2' x='295.275639' y='88.765503'>µν</text>
</g>
</svg>

相关内容