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。

參考來源