使用MCP优化 MathJax 数学环境中文发虚发淡

在整理 MathJax 公式样式时，我发现数学环境里的中文（例如 align 里写的“求/设/及”）看起来会偏淡、边缘发虚、不如正文清晰。本文记录用 MCP 浏览器调试定位到 MathJax 的中文渲染节点，并通过 source/custom/math/math.css 为数学环境中文单独设置 CJK 字体栈与字重，从而提升清晰度。

问题复现

复现文章：source/_posts/math/数学题.md（Front-matter 已开启 math: true）。

在页面中，中文直接写在数学环境里，例如：

\begin{align}
  f(x) &= x^3 + 4\cos x + \sin\frac{\pi}{2},\ \text{求 } f'(x)
\end{align}

现象是：

• 正文里的中文显示正常
• 公式里的中文（“求/设/及”等）明显更细、更淡，观感像“糊了一层”

用 MCP 在浏览器里定位

打开本地预览（示例）：

• http://localhost:4000/2025/12/18/math/数学题/

在 DevTools（通过 MCP）里选中公式中的中文字符后，可以看到它并不是普通的 span，而是 MathJax 生成的节点：

• 外层：<mjx-container jax="CHTML" ...>（说明用的是 MathJax v3 的 CHTML 输出）
• 中文：多出现在 mjx-utext（MathJax 的“文本”节点）

继续看 Computed 样式，会发现中文节点最终落在了“公式字体栈”的回退路径上：

• mjx-container 的 font-family 以数学字体为主（如 STIX/Cambria/Times）
• 当遇到中文字符时会 fallback 到系统 CJK 字体，但字重/渲染策略与正文不同，导致观感偏淡

解决方案：数学环境中文单独走 CJK 字体栈

思路是：只针对数学环境的中文节点（mjx-utext）覆盖字体与字重，不去全局替换数学公式本身的拉丁/符号字体。

我在 source/custom/math/math.css 增加了两组变量，并添加一条针对性规则：

• --math-cjk-font-family：中文字体栈（优先系统常见 CJK 字体）
• --math-cjk-font-weight：中文在数学环境中的字重（默认 500）

核心 CSS（节选）：

mjx-container[jax="CHTML"] mjx-utext {
  font-family: var(--math-cjk-font-family) !important;
  font-weight: var(--math-cjk-font-weight) !important;
  font-style: normal !important;
}

这样做的好处：

• 公式符号仍使用数学字体（不影响公式风格）
• 仅把数学环境里的中文拉回到更清晰的 CJK 字体与更合适的字重

验证

修改后：

1. 浏览器对页面 Ctrl+Shift+R 强制刷新
2. 再次选中公式中的“求/设/及”，确认 mjx-utext 的 Computed 中：
   • font-family 命中 PingFang SC / Microsoft YaHei / Noto Sans SC ...
   • font-weight 为 500

主观观感上，数学环境里的中文清晰度与正文更接近，“发虚/发淡”明显改善。

可调参数

如果你觉得还不够“黑”，可以把：

• --math-cjk-font-weight: 500; 改成 600

如果你希望全设备一致（不同系统字体差异会影响观感），可以考虑后续引入一款统一的 CJK 字体（自托管或 CDN），再把它放到 --math-cjk-font-family 的最前面。

相关文件

• source/custom/math/math.css
• _config.fluid.yml（custom_css 引入 /custom/math/math.css）
• source/_posts/math/数学题.md