如何在Quarto文档（HTML和PDF）的不同区块设置不同字体

方案选择：CSS优于直接HTML标签 #

用CSS类来定义字体样式是更优的选择——样式与内容分离，易维护，且能统一Quarto的Markdown标记语法（无需大量嵌入HTML标签）。你完全不需要提示框样式，只要在CSS中仅定义字体、字号属性即可，不会产生额外的边框/背景效果。

完整配置步骤（兼顾HTML和PDF输出） #

要确保两种输出格式的字体一致，需要同时配置CSS（针对HTML）和LaTeX头部代码（针对PDF，依赖XeLaTeX/LuaTeX引擎）。

1. 创建自定义CSS文件（比如styles.css）

/* 自定义字体类，无提示框样式 */
.special_font_1 {
  font-family: "Gentium", serif;
  font-size: 1.2em; /* 字号可根据需求调整 */
}

.special_font_2 {
  font-family: "Arial", sans-serif;
  font-size: 0.95em;
}

2. 编写Quarto文档

---
title: "My Document"
mainfont: Latin Modern Roman
css: styles.css
format:
  html: default
  pdf:
    pdf-engine: xelatex  # 必须用XeLaTeX/LuaTeX，支持调用系统字体
    include-in-header:
      text: |
        \usepackage{fontspec}
        % 定义与CSS类对应的LaTeX环境，保证PDF字体一致
        \newenvironment{special_font_1}{\fontspec{Gentium}\fontsize{12pt}{14pt}\selectfont}{\par}
        \newenvironment{special_font_2}{\fontspec{Arial}\fontsize{9.5pt}{11pt}\selectfont}{\par}
---

This section is in the normal Latin Modern Roman font. 

::: {.special_font_1}
This text is in a Gentium font
:::

Some more in the regular font

::: {.special_font_2}
Yet more text, but in an Arial font.
:::

Final text in normal Latin font.

关键说明 #

• CSS配置: 你只需要编写.special_font_1 { font-family: Gentium }这类基础代码即可，无需额外复杂配置。如果要设置字号、字重等，直接在类中添加对应属性。
• PDF输出兼容: 依赖XeLaTeX/LuaTeX引擎是因为它们支持fontspec包，能直接调用系统中的字体，和HTML的字体查找逻辑一致，避免字体不匹配问题。LaTeX环境的字号要和CSS中的字号对应（比如CSS的1.2em对应LaTeX的12pt）。
• HTML标签替代: 如果你偏好HTML标签，也可以用<div class="special_font_1">...</div>或<span class="special_font_1">...</span>（行内文本），效果和Quarto的:::语法一致，但后者更符合Markdown的简洁风格。

额外注意事项 #

• 确保目标字体（如Gentium）已安装在你的系统中；如果是HTML输出，也可以通过@font-face引入Web字体，避免依赖本地字体。
• 如果使用LuaTeX，配置逻辑和XeLaTeX一致，只需将pdf-engine改为lualatex即可。

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