文字是網頁構成的核心，而字體的呈現方式——包括其大小、顏色、樣式與字型——直接影響著使用者的閱讀體驗與網站的整體質感。在網頁發展的歷史中，控制字體的方法經歷了重大的演變。從早期直接在 HTML 中定義樣式的 <font> 標籤，到現今將內容結構（HTML）與外觀樣式（CSS）徹底分離的現代化作法。
本文將帶您深入探討 HTML 文字與字體的完整知識體系。我們將回顧已被淘汰的傳統方法以瞭解其歷史背景，並著重介紹當代網頁開發中控制字體的標準——CSS。無論您是網頁設計的初學者，還是希望鞏固基礎知識的開發者，這篇文章都將為您提供一個詳細且全面的指南。
傳統方法：已被棄用的 <font> 標籤
在 HTML4 的時代，<font> 標籤是改變文字外觀的主要工具。它允許開發者直接在 HTML 文件中設定文字的顏色、大小和字型。
基本語法：
<font face="字型名稱" size="大小" color="顏色">這是一段文字。</font>這個標籤主要依賴三個屬性來控制文字樣式，讓文字產生變化：
|
屬性 |
屬性值與說明 |
範例 |
|---|---|---|
|
color |
設定文字顏色。可以使用顏色名稱（如 red）或十六進位色碼（如 #FF0000）。 |
<font color="blue">藍色文字</font> |
|
size |
設定文字大小。範圍是 1 到 7 的整數，預設值為 3。數字越大，文字越大。 |
<font size="5">大小為 5 的文字</font> |
|
face |
設定文字的字型。例如「標楷體」、「Arial」、「tahoma」。瀏覽者人的電腦必須安裝該字型才能正確顯示。 |
<font face="微軟正黑體">微軟正黑體</font> |
Example：
<html>
<head>
<title>Font 標籤範例</title>
</head>
<body>
<p>
這是一段<font face="標楷體" size="5" color="red">經過特殊設定</font>的文字。
</p>
</body>
</html>
上方程式碼的執行結果，就是在頁面上顯示一段經過特殊樣式設定的文字。
為何 <font> 標籤被棄用？
儘管 <font> 標籤在當時很實用，但它存在嚴重缺陷。最主要的問題是它將 內容（HTML）與表現（樣式）混雜在一起。這導致了以下問題：
1. 維護困難：若要修改整個網站的字體顏色，例如將所有紅色文字改成綠色，必須手動更改每一個 <font> 標籤，極其耗時且容易出錯。
-
程式碼臃腫：大量重複的樣式標籤會讓 HTML 檔案變得龐大，影響載入速度。
-
語意不清：HTML 的核心價值在於描述內容的「結構」與「語意」，而 <font> 標籤只關心外觀，不具任何語意價值。
-
可訪問性差：對於螢幕閱讀器等輔助工具來說，這些純樣式的標籤是沒有意義的噪音資訊。
因此，自 HTML5 標準確立以來，<font> 標籤已被正式棄用。現代網頁開發強烈建議使用 CSS 來控制所有與字體相關的樣式。
基礎文字格式化：語意與樣式並存的標籤
除了 <font> 標籤外，HTML 提供了一系列用於格式化文字的標籤。與 <font> 不同，這些標籤多數帶有語意（Semantic）上的意義，不僅影響外觀，也告訴瀏覽器和搜尋引擎這段文字的「角色」。
|
標籤 |
說明與用途 |
預設外觀 |
|---|---|---|
|
<b> |
粗體 (Bold)：用於引起讀者注意，但不增加語意上的重要性。例如產品名稱、關鍵字。 |
粗體 |
|
<strong> |
重要 (Strong Importance)：表示內容非常重要、嚴重或緊急，是真正的重點文字。對螢幕閱讀器而言，語氣會加重。 |
粗體 |
|
<i> |
斜體 (Italic)：用於外來語、專業術語、思考或旁白等，使文字在語氣或風格上與周圍不同，是常見的斜體字。 |
斜體 |
|
<em> |
強調 (Emphasis)：用於強調文字，改變句子的語意重點。螢幕閱讀器會以強調的語氣朗讀。 |
斜體 |
|
<u> |
底線 (Underline)：在網頁上應謹慎使用，因為使用者習慣將底線與超連結聯想在一起。可用於標示專有名詞或拼寫錯誤。 |
\<u>底線\</u> |
|
<s>, <del> |
刪除線 (Strikethrough)：<s> 用於表示不再準確或相關的內容；<del> 則明確表示內容已被刪除。 |
\<s>刪除線\</s> |
|
<sup> |
上標 (Superscript)：用於數學指數 (x\<sup>2\</sup>) 或註腳。 |
x¹⁰ |
|
<sub> |
下標 (Subscript)：用於化學式 (H₂O) 或數學下標。 |
H₂O |
|
<mark> |
標記 (Mark)：用於凸顯或標記與使用者當前活動相關的文字，如同用螢光筆劃記。 |
\<mark>標記文字\</mark> |
|
<code> |
程式碼 (Code)：用於表示一小段電腦程式碼。通常以等寬字型顯示。 |
<code>console.log()</code> |
|
<pre> |
預格式化 (Preformatted)：保留文字中的空白和換行符，字元的寬度通常是固定的。適合用於顯示大塊的程式碼或 ASCII 藝術。 |
<pre>保留空白和 換行</pre> |
<b> vs <strong> 與 <i> vs <em> 的抉擇
當您希望文字在語意上更重要時，使用 <strong> 來標示粗體字。
當您只想讓文字在視覺上變粗以吸引注意，而無特殊重要性時，使用 <b>。
當您想改變句子重音來影響其涵義時，使用 <em>。
當您想將文字標示為不同語氣或類型（如書名、外語）時，使用 <i>。
在多數情況下，優先考慮使用具有語意的 <strong> 和 <em>。
現代標準：使用 CSS 全面掌控字體樣式
CSS (Cascading Style Sheets) 是現代網頁設計的基石，它允許我們將樣式規則從 HTML 架構中分離出來，實現更靈活、更強大的字體控制。
有三種方式可以將 CSS 應用於 HTML：
1. 外部樣式表 (External CSS)：將所有樣式寫在一個獨立的 .css 檔案中，並在 HTML 的 <head> 區域中連結。這是最佳實踐，易於管理和維護。
2. 內部樣式表 (Internal CSS)：將樣式寫在 HTML 檔案 <head> 區域的 <style> 標籤內。適用於單一頁面的特殊樣式。
3. 行內樣式 (Inline CSS)：直接在 HTML 元素的 style 屬性中編寫樣式。應盡量避免使用，因其再度將樣式與內容混合。
下方是控制字體最重要的四個 CSS 屬性：
font-family (字型)
此屬性用於設定字型。由於無法保證所有使用者電腦上都安裝了特定字型，最佳做法是提供一個「字型備用列表」（Font Stack）。瀏覽器會從列表的第一個字型開始依順序嘗試，如果找不到，則繼續嘗試下一個。
範例：
p {
/* 優先使用 Helvetica Neue，若無則用 Helvetica，再無則用 Arial，最後使用任何無襯線字體 */
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.chinese-text {
/* 針對繁體中文的字型備用列表 */
font-family: "PingFang TC", "Microsoft JhengHei", "微軟正黑體", sans-serif;
}
font-size (文字大小)
設定文字的大小。有多種單位可供選擇：
px (像素)：絕對單位，精確但不利於縮放。
em：相對單位，相對於父元素的字體大小。
rem (root em)：相對單位，相對於根元素（<html>）的字體大小。這是目前最推薦的單位，因其便於實現響應式設計和提升可訪問性。
% (百分比)：與 em 類似。
範例：
h1 {
font-size: 2.5rem; /* 根字體的 2.5 倍 */
}
p {
font-size: 1rem; /* 等於根字體大小 */
}
font-weight (字體粗細)
控制文字的粗細程度，可以創造出不同的特效。
關鍵字：normal (預設值, 相當於 400), bold (相當於 700)。
數值：100 到 900 的整百數值。需要字型本身支援這些粗細級別。
範例：
.bold-text {
font-weight: bold; /* 或 font-weight: 700; */
}
.light-text {
font-weight: 300;
}
font-style (字體樣式)
設定文字的樣式，主要用於斜體。
normal：正常。
italic：斜體。
* oblique：傾斜體。通常是瀏覽器將正常字體強制傾斜的結果。
範例：
.italic-text {
font-style: italic;
}
進階應用：網頁字型 (Web Fonts)
過去，網頁設計師只能使用少數幾種所有作業系統都內建的「網頁安全字型」。而現在， grâce à 網頁字型技術，我們可以突破這個限制。網頁字型是儲存在伺服器上的字型檔，當使用者瀏覽網頁時，像 Chrome 這類的瀏覽器會自動下載並套用，確保所有使用者看到的都是設計師指定的特殊字型。
最主流的兩種使用方式：
使用字型服務 (如 Google Fonts, Adobe Fonts)
這是最簡單方便的方法。
1. 挑選字型：在 Google Fonts 等網站上選擇您喜歡的字型。
-
取得連結：網站會提供一段 <link> 程式碼。
-
置入 HTML：將這段 <link> 程式碼貼到您 HTML 文件的 <head> 區域。
-
在 CSS 中使用：直接在您的 CSS font-family 屬性中使用該字型的名稱。
範例 (使用 Google Fonts 的 'Noto Sans TC')：
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap" rel="stylesheet">
/* 步驟 4: 在 CSS 中使用，這些樣式也能應用在按鈕或其他元素的文字上 */
body {
font-family: 'Noto Sans TC', sans-serif;
}
自行託管字型 (@font-face)
您也可以下載字型檔（如 .woff2 格式），上傳到自己的伺服器，並使用 CSS 的 @font-face 規則來載入它們。
@font-face {
font-family: 'MyCustomFont'; /* 自訂字型名稱 */
src: url('path/to/mycustomfont.woff2') format('woff2');
}
body {
font-family: 'MyCustomFont', sans-serif;
}
常見問題 (FAQ)
Q1: <font> 標籤現在還能用嗎？為什麼不推薦使用？
A: 大部分現代瀏覽器為了向下相容，可能仍會渲染 <font> 標籤的樣式。但它在 HTML5 標準中已被正式棄用。不推薦使用的主要原因是它違反了「內容與樣式分離」的核心原則，會導致網站難以維護、程式碼臃腫且不利於 SEO 與網頁可訪問性。
Q2: <b> 和 <strong> 標籤看起來一樣，有什麼不同？我應該用哪一個？
A: 視覺上它們預設都是粗體，但語意完全不同。<strong> 代表內容本身具有「強烈的重要性」，而 <b> 僅是為了在視覺上「引起注意」，沒有增加重要性。您應該根據文意來選擇：如果內容很重要，用 <strong>；如果只是想讓一個詞在段落中突出，用 <b>。
Q3: 為什麼我用 font-family 設定的中文字型在別人的電腦上沒有效果？
A: 最常見的原因是對方電腦中沒有安裝您指定的那個中文字型。解決方案有三：1) 使用常見的預設字型（如微軟正黑體、蘋方體）；2) 提供一個包含多種常見字型的備用列表；3) 使用網頁字型技術，讓瀏覽器自動下載所需字型，確保顯示效果一致。
Q4: 什麼是「網頁字型」(Web Fonts)？使用它有什麼好處？
A: 網頁字型是指將字型檔存放在網路伺服器上，當使用者造訪網站時，瀏覽器會像下載圖片一樣下載該字型並應用到文字上。最大的好處是，設計師可以自由選用各種特殊、美觀的字型，而不必擔心使用者電腦上是否安裝了這些字型，從而實現了設計的創意自由和品牌視覺的一致性。
總結
網頁字體的處理方式反映了網頁技術的進步，從早期混亂的 <font> 標籤，演進到今日結構與樣式分離的清晰模式。
核心觀念回顧：
停止使用 <font> 標籤：它是過時的技術，應全面擁抱 CSS。
理解語意化標籤：合理使用 <strong>, <em> 等標籤，讓您的 HTML 部分不僅美觀，更有內涵。
掌握 CSS 核心屬性：font-family, font-size, font-weight, font-style 是您控制文字外觀的利器。
善用網頁字型：透過 Google Fonts 或 @font-face，讓您的設計不再受限於傳統字型，展現獨特風格。
遵循內容與樣式分離的原則，不僅能讓您的網站更易於維護、載入更快，還能提升其在搜尋引擎上的表現和對所有使用者的可訪問性。這正是專業網頁開發的基礎所在。