你以为数学公式渲染只能靠 MathJax？今天 font-family: math 把这件事做进了浏览器——Baseline 2026 三引擎支持

你以为数学公式渲染只能靠 MathJax？今天 font-family: math 把这件事做进了浏览器——Baseline 2026 三引擎支持。

前端页面里出现数学公式，标准答案长期以来是引入 MathJax 或 KaTeX。几百 KB 的脚本，渲染还要等一次 JS 执行，公式里的行列式、积分符号、上下标全部靠脚本算出来——这些本该是浏览器的活。

Baseline 2026 把 font-family: math 加入了 CSS 的通用字体族序列，浏览器第一次能直接渲染数学符号，不需要任何运行时脚本。

font-family: math 是什么

math 是 CSS Fonts Level 4 新增的通用字体关键字，和 ui-sans-serif、ui-serif、ui-monospace 同级。你可以在任何 font-family 声明里把它加进回退栈：

.math-block {
  font-family: math, "Latin Modern Math", "STIX Two Math", serif;
}

浏览器会从系统里找专用的数学字体（Linux 上通常是 Latin Modern Math 或 STIX Two Math），这种字体天然知道怎么渲染：

• 积分、求和、连乘等大型运算符要随内容伸缩
• 括号和分隔符要根据嵌套深度自动拉伸
• 上下标的间距和大小由字体设计规范决定，而不是 CSS 手调
• 特殊运算符（可约分数、约等于号、箭头运算符）有独立字形

Before（手调行高和间距）：

.formula {
  font-size: 1.1em;
  /* 上下标手动调位置 */
  vertical-align: sub;
  font-size: 0.7em;
  line-height: 1.2;
  /* 括号要靠左右各一个括号字符撑开 */
}

After（直接声明数学字体，浏览器搞定一切）：

/* 数学内容块 */
.math-block {
  font-family: math, "Latin Modern Math", "STIX Two Math", serif;
  font-size: 1.2rem;
}

/* 行内数学 */
p em {
  font-family: math, serif;
}

配合 MathML 使用

font-family: math 最标准的用法是配合 <math> 元素，这是 HTML 原生的数学标记语言：

<math>
  <mrow>
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
      <mrow>
        <mo>-</mo>
        <mi>b</mi>
        <mo>±</mo>
        <msqrt>
          <mrow>
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo>-</mo>
            <mn>4</mn><mi>ac</mi>
          </mrow>
        </msqrt>
      </mrow>
      <mrow><mn>2</mn><mi>a</mi></mrow>
    </mfrac>
  </mrow>
</math>

加上 CSS：

math {
  font-family: math, serif;
  font-size: 1.2em;
}

浏览器现在能正确渲染这个二次方程求根公式，包括分数、平方根和伸缩括号，全部原生完成，不需要任何 JS 库。

和 MathJax 的体积对比

实际页面中如果只有零星公式，font-family: math 完全够用；如果有大量复杂排版（矩阵、分段函数、证明推导），MathJax 仍是更完整的方案，但 CSS 字体层的加入可以减少回退栈里对它的依赖。

规范与浏览器支持

CSS Fonts Level 4 的 math 通用字体族于 2026 年 1 月随 Baseline 2026 进入 Newly Available，Chrome、Firefox、Safari 三大桌面版浏览器均已支持。规范地址：https://www.w3.org/TR/css-fonts-4/#font-family-math。

接下来可以做什么

页面上有数学公式的地方，把 font-family: math 加入回退栈的第一位——如果只有几个简单公式，直接去掉 MathJax 依赖；复杂公式保留 MathJax 作为 fallback，CSS 字体层兜底，不需要 JS 的场景直接走浏览器原生渲染，FOIT 完全消失。