我想在我的博客上用红色显示问题，用蓝色显示答案。在问答中，我使用 MathJax 2 来渲染 MathML。 我正在使用这样的 CSS 控制 MathJax 的着色。
h3, h2, h4, h5
{
text-align: left;
font-weight: bold;
font-family: Verdana;
}
.question
{
text-align: left;
color: Red;
}
.centerit
{
color: Blue;
text-align: center;
}
在 IE 中工作得非常好，但在 Firefox 中它总是以黑色显示 MathJax。有什么办法可以解决这个问题吗？
【问题讨论】：
MathJax 支持\color 宏，但它的工作方式与 LaTeX 不同。在 LaTeX 中，\color 像 \bf 这样的普通 TeX 命令工作，但 MathJax 把它当作像 \textbf 这样的 LaTeX 命令。
\[ \color{red} The whole sentence is red in LaTeX,
but only the initial T is colored in MathJax. \]
【讨论】：
\color{red}{my red equation}
如果您使用file:// URL 在本地测试您的网站，那么 Firefox 的同源策略可能会强制 MathJax 使用图像字体而不是 Web 字体。请参阅MathJax FAQ 条目，特别是有关 Firefox 本地 @font-face 的部分。一种解决方案是在您进行测试的计算机上本地安装 MathJax 字体。字体可以从MathJax GitHub repository获取（点击字体，然后点击右上角的“Raw”按钮）。
或者，您可以在调试期间简单地忽略黑色，因为它一旦转移到实时网站就会正常工作。
【讨论】：
@font-face），并且（2）在本地安装MathJax字体可以解决问题，因为不再需要@font-face。我很高兴你能做到这一点，并希望你能接受我的回答，因为它确实为你提供了你需要的两条信息。
如果您想为方程的不同部分涂上不同的颜色（例如，如果您想对变量进行颜色编码），请使用\textcolor 命令而不是\color 以避免出现间距问题。
看看区别：
使用\textcolor（首选）：
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
$$
y = \textcolor{red}{\sin} x
$$使用\color（导致间距不正确）：
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
$$
y = \color{red}{\sin} x
$$用于提高可读性演示的彩色 MathJax 方程：trigids.com。
【讨论】：
\color 的默认值已从 MathJax v2 中使用的非标准版本更改为 v3 中与 LaTeX 兼容的版本。这意味着\color{red} 充当开关（它不带参数），因此您的方程式从那里开始变红。请注意，$x$ 也是红色的。这意味着{\sin} 现在被\sin 括在大括号中（不是\color 的参数），这会影响间距。所以间距由 MathJax 正确处理；你只是没有具体说明你认为你有什么。
$$ y = \color{red}{sin}x $$
=
$$ y = \color{red}{sin}x $$
是答案，但是
$$ y = \color{red}sin x $$
=
$$ y = \color{red}sin x $$
不是答案。
【讨论】：