使用远程css文件时,渲染结果很好,很完美,但是当使用本地css文件(我只是从cdn复制并且从未更改字符(时,渲染结果变得奇怪。
使用本地 css 文件
使用远程 css 文件
可以确定的是,本地css文件已经加载,否则渲染结果将是这样的:
Inline equation: e=mc^2 e=mc2
Display equation:
begin{Bmatrix} a & b c & d end{Bmatrix} {acbd}
源代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.css">
<!--local css file gone weird
<link rel="stylesheet" href="katex.min.css">
-->
</head>
<body>
<p>Inline equation: <span class="katex"><span class="katex-mathml"><math>
<semantics>
<mrow>
<mi>e</mi>
<mo>=</mo>
<mi>m</mi>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</mrow>
<annotation encoding="application/x-tex">e=mc^2</annotation>
</semantics>
</math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.43056em;vertical-align:0em;"></span><span
class="mord mathdefault">e</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span
class="mrel">=</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span></span><span
class="base"><span class="strut" style="height:0.8141079999999999em;vertical-align:0em;"></span><span
class="mord mathdefault">m</span><span class="mord"><span class="mord mathdefault">c</span><span
class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8141079999999999em;"><span
style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span
class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span></span></span></span></p>
<p>Display equation:</p>
<p><span class="katex-display"><span class="katex"><span class="katex-mathml"><math>
<semantics>
<mrow>
<mo fence="true">{</mo>
<mtable>
<mtr>
<mtd>
<mstyle scriptlevel="0" displaystyle="false">
<mi>a</mi>
</mstyle>
</mtd>
<mtd>
<mstyle scriptlevel="0" displaystyle="false">
<mi>b</mi>
</mstyle>
</mtd>
</mtr>
<mtr>
<mtd>
<mstyle scriptlevel="0" displaystyle="false">
<mi>c</mi>
</mstyle>
</mtd>
<mtd>
<mstyle scriptlevel="0" displaystyle="false">
<mi>d</mi>
</mstyle>
</mtd>
</mtr>
</mtable>
<mo fence="true">}</mo>
</mrow>
<annotation encoding="application/x-tex">begin{Bmatrix}
a & b
c & d
end{Bmatrix}</annotation>
</semantics>
</math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:2.40003em;vertical-align:-0.95003em;"></span><span
class="minner"><span class="mopen delimcenter" style="top:0em;"><span class="delimsizing size3">{</span></span><span
class="mord"><span class="mtable"><span class="col-align-c"><span class="vlist-t vlist-t2"><span
class="vlist-r"><span class="vlist" style="height:1.45em;"><span style="top:-3.61em;"><span
class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathdefault">a</span></span></span><span
style="top:-2.4099999999999997em;"><span class="pstrut" style="height:3em;"></span><span
class="mord"><span class="mord mathdefault">c</span></span></span></span><span
class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height:0.9500000000000004em;"><span></span></span></span></span></span><span
class="arraycolsep" style="width:0.5em;"></span><span class="arraycolsep" style="width:0.5em;"></span><span
class="col-align-c"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist"
style="height:1.45em;"><span style="top:-3.61em;"><span class="pstrut" style="height:3em;"></span><span
class="mord"><span class="mord mathdefault">b</span></span></span><span
style="top:-2.4099999999999997em;"><span class="pstrut" style="height:3em;"></span><span
class="mord"><span class="mord mathdefault">d</span></span></span></span><span
class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height:0.9500000000000004em;"><span></span></span></span></span></span></span></span><span
class="mclose delimcenter" style="top:0em;"><span class="delimsizing size3">}</span></span></span></span></span></span></span></p>
</body>
</html>
我们需要的是KaTeX使用的fonts
文件夹。
可以在此 github 存储库中访问此文件夹。