如何用CSS为Quarto HTML报告单独设置数学公式字体？

问题原因 #

你通过全局CSS选择器*将所有元素字体统一设为Aktiv Grotesk，但该字体未适配数学公式专用符号（比如平方根），导致符号显示异常。

方案1：用CSS单独指定公式字体 #

Quarto的HTML输出中，行内公式会被包裹在<span class="math inline">标签中，块级公式对应<span class="math display">标签。你可以针对性修改CSS，为公式元素单独配置适配数学符号的字体：

修改styles2.css代码如下：

p {
  font-size: 11pt;
  font-family: 'Aktiv Grotesk';
  color: black;
}

/* 全局字体规则排除公式元素 */
*:not(.math) {
  font-family: 'Aktiv Grotesk', Times, serif;
}

/* 为公式设置专用数学字体 */
.math {
  font-family: 'Latin Modern Math', 'TeX Gyre Pagella Math', serif;
}

说明：

• :not(.math)确保全局字体规则不作用于公式元素
• 给.math类指定专门的数学字体，这类字体包含完整的数学符号集，能正常显示平方根等元素

方案2：通过Quarto配置优化公式渲染 #

无需修改CSS，直接在Quarto文档的YAML配置中调整KaTeX的渲染参数，让公式自动适配合适字体：

修改文档头部的YAML：

---
format: 
  html:
    css: styles2.css
    katex:
      font: "Latin Modern Math"
      global-options:
        strict: false
---

或者设置KaTeX自动选择字体：

---
format: 
  html:
    css: styles2.css
    katex:
      font: "auto"
---

这样公式会自动匹配适配的数学字体，同时正文保持Aktiv Grotesk字体不变。

方案3：局部手动修复个别公式 #

如果仅需修复特定公式，可在Markdown中用HTML标签临时指定字体：

Tilt magnitude is calculated using <span style="font-family: 'Latin Modern Math'">$Mag = \sqrt{N^{2} + W^{2}}$</span>.

内容的提问来源于stack exchange，提问作者Eric Krantz