Markdown 字体大小设置教程

Markdown 本身没有专门的字体大小语法。这个设计是有意为之的——Markdown 的哲学是让作者关注内容而非排版。但实际写文档时，确实有需要调整字体大小的场景，比如标注、注释、或者强调某些文字。好在大部分 Markdown 渲染器都支持内嵌 HTML，我们可以用 HTML 标签来实现。

先说结论：纯 Markdown 能做什么？

纯 Markdown 语法中，唯一能间接改变文字大小的就是标题（headings）：

## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题（最小）

标题字号从 H1 到 H6 依次递减，这是 CommonMark 规范 定义的标准行为。但这只适用于标题文字，正文内容的字体大小，Markdown 语法管不了。

想要精确控制正文字体大小，需要借助 HTML。

方法一：用 <span> 标签加行内样式（推荐）

这是最通用、最推荐的方案。几乎所有允许内嵌 HTML 的 Markdown 渲染器都支持：

<span style="font-size: 24px;">这是大号文字</span>
<span style="font-size: 12px;">这是小号文字</span>
<span style="font-size: 0.8em;">相对缩小的文字</span>
<span style="font-size: 1.5em;">相对放大的文字</span>

渲染效果：

  • 这是大号文字
  • 这是小号文字

使用 px（像素）还是 em（相对单位）？

两种单位都可以，适用场景不同：

单位说明适用场景
px绝对大小，1px = 1像素需要精确控制字号时
em相对父元素字体大小的倍数响应式布局、保持比例关系
rem相对根元素字体大小全站统一的相对单位
%父元素字体大小的百分比类似 em，直观一些

日常使用中，px 最简单直接，em 更灵活。我个人倾向于用 em，因为文字会跟随用户浏览器设置的基础字号等比缩放，可访问性更好。

常用字号参考

<span style="font-size: 10px;">极小文字（脚注、注释）</span>
<span style="font-size: 12px;">小号文字（辅助说明）</span>
<span style="font-size: 16px;">正文大小（通常为默认值）</span>
<span style="font-size: 20px;">中等偏大文字</span>
<span style="font-size: 24px;">大号文字</span>
<span style="font-size: 32px;">超大号文字</span>

方法二：用 <big> 和 <small> 标签

HTML 5 中 <big> 标签已被废弃，但很多 Markdown 渲染器仍然支持。<small> 标签在 HTML 5 中是有效的语义标签，表示"旁注"或"附属细则"：

<small>这段文字会比较小</small>
<big>这段文字会比较大</big>（注意：big 标签已废弃）

<small><small>嵌套使用会更小</small></small>

<small> 标签渲染出来的字号大约是正常文字的 80%（约 0.8em）。可以嵌套使用来进一步缩小。

我的建议是：优先用 <small>，因为它在 HTML 5 中有语义含义（fine print / side comments），搜索引擎能理解它的用途。不要用 <big>，它已被废弃。

方法三：用 <font> 标签（已废弃，不推荐）

<font> 标签在 HTML 4 中就被废弃了，但部分 Markdown 渲染器仍然识别它：

<font size="1">最小号</font>
<font size="3">正常大小</font>
<font size="5">较大号</font>
<font size="7">最大号</font>

size 属性的值从 1 到 7，3 是默认大小。虽然写法简单，但这个标签在严格模式的 HTML 解析器中会被忽略，现代 Web 开发中不应该再使用它。

不推荐使用的原因：

  • HTML 5 完全不支持
  • 越来越多的 Markdown 渲染器会过滤掉它
  • 没有语义信息，不利于 SEO 和可访问性

方法四：用 <sup> 和 <sub> 间接缩小文字

上标 <sup> 和下标 <sub> 标签不是用来控制字体大小的，但它们的渲染效果确实会让文字变小并偏移位置。如果恰好需要小号的上标或下标文字，可以用：

正常文字<sup>上标文字（自动缩小）</sup>
正常文字<sub>下标文字（自动缩小）</sub>

这个方法是语义正确的，用于化学式（H2O）、数学公式（x2）等场景。

不同平台的兼容性

字体大小控制严重依赖平台对 HTML 的支持程度。以下是主流平台的情况：

平台<span style><small><font>说明
GitHub不支持不支持不支持README 中 HTML 样式被过滤
GitLab部分支持支持不支持允许部分 HTML 标签
Obsidian支持支持支持完整 HTML 支持
Typora支持支持支持完整 HTML 支持
VS Code 预览支持支持支持基于 Chromium，支持完整 HTML
Joplin支持支持支持完整 HTML 支持
R Markdown支持支持支持输出为 HTML 时完全支持
Notion不支持不支持不支持不接受自定义 HTML
Discord不支持不支持不支持不支持自定义 HTML
Slack不支持不支持不支持不支持自定义 HTML
静态站点支持支持取决于配置Jekyll/Hugo/Eleventy 等完全支持

GitHub 的特殊限制

GitHub 的 Markdown 渲染器（基于 CommonMark）会主动过滤掉 HTML 中的 style 属性。也就是说，在 GitHub 的 README.md、Issue、PR 描述中，<span style="font-size: 20px;">大文字</span> 会被渲染成普通大小的文字，样式被完全忽略。

在 GitHub 上，你能用的字号控制只有：

  • 标题（# 到 ######）
  • 粗体 **text**（视觉上略大）
  • 如果必须精确控制，需要用 GitHub Pages（Jekyll 静态站点），那里可以完全自定义 CSS

R Markdown 中的字体大小

R Markdown 用户可以通过 YAML 头部设置全局字号，也可以在文档中局部调整：

---
output:
  html_document:
    css: styles.css
---

局部调整：

```{r, results='asis'}
cat('<span style="font-size: 10px;">小号文字</span>')

如果输出为 PDF，可以在 LaTeX 层面控制：

```latex
\footnotesize 小号文字
\huge 大号文字

在静态站点中统一管理字体大小

如果你用 Jekyll、Hugo、Eleventy 等静态站点生成器，最好的做法是在 CSS 中定义字号类，然后在 Markdown 中引用：

/* 在你的 CSS 文件中 */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }

然后在 Markdown 里：

<span class="text-xl">大号标题说明文字</span>
<span class="text-sm">辅助注释文字</span>

这样做的好处是：修改一处 CSS，全站所有引用该类名的文字都跟着变，维护成本远低于到处写行内样式。

实际使用建议

字体大小这东西，能不用就不用。大部分情况下，Markdown 默认的正文+标题层级已经够用了。需要调整字号的场景通常是：

  • 脚注和注释：用 <small> 或 font-size: 0.8em
  • 警告/提示标签：配合颜色用稍大字号引起注意
  • 数据表格中的单位说明：用小字号避免喧宾夺主
  • 首页 Banner 或特色区域的标题说明文字：用较大字号建立视觉层级

记住一个原则：如果整个页面到处都是不同的字号，读者的眼睛会很累。 字号变化应该服务于内容层级，而不是装饰。

常见问题

Markdown 有没有原生的字体大小语法？

没有。Markdown 的设计理念就是只关注内容结构，不关心排版细节。字体大小属于排版范畴，需要用 HTML 或 CSS 来实现。

为什么 <span style="font-size: ..."> 在 GitHub 上不生效？

GitHub 的 Markdown 渲染器会过滤掉 HTML 标签中的 style 属性，这是出于安全考虑。在 GitHub 上，字体大小只能通过标题语法间接控制。

<small> 和 font-size: 0.8em 有什么区别？

视觉效果基本一样，但语义不同。<small> 在 HTML 5 中表示"附属细则"（fine print），有明确的语义含义；font-size: 0.8em 纯粹是视觉调整，没有语义。推荐优先使用 <small>。

能在一个段落里混用不同字号吗？

可以。<span> 是行内元素，可以和周围的正常文字混排：

这是一段正常文字，<span style="font-size: 20px;">这部分变大</span>，然后又恢复正常。

字体大小会影响 SEO 吗？

不会直接影响排名。但使用语义化的 HTML 标签（如 <small> 表示旁注、<h1>-<h6> 表示标题层级）有助于搜索引擎理解内容结构，间接有利于 SEO。

参考来源