基本文字和字型樣式

在本文中，我們將帶你踏上掌握 CSS 文字樣式的旅程。我們將詳細介紹文字/字型樣式的所有基本要素，包括設定字型粗細、字體系列和樣式、字型速記、文字對齊和其他效果，以及行距和字距。

預備知識	使用 HTML 構建內容和 CSS 樣式基礎。
學習成果	理解字體系列、字型堆疊和網頁安全字型的概念。設定字型顏色、粗細、大小和樣式。設定文字對齊、轉換和裝飾。設定行高。瞭解還有其他幾種字型和文字樣式屬性，並鼓勵探索它們。

CSS 文字樣式涉及哪些內容？

元素內的文字在元素的內容框內佈局。它從內容區域的左上角開始（如果內容是 RTL 語言，則從右上角開始），並向行尾流動。一旦到達行尾，它會向下移動到下一行並再次流向行尾。此模式重複，直到所有內容都放置在框中。文字內容實際上表現為一系列內聯元素，彼此相鄰地排列在行中，直到到達行尾，或者除非你使用 <br> 元素手動強制換行，否則不會建立換行符。

注意： 如果上面的段落讓你感到困惑，那沒關係——回去複習我們的盒模型文章，在繼續之前複習一下盒模型理論。

用於樣式化文字的 CSS 屬性通常分為兩類，我們將在本文中分別討論

字型樣式：影響文字字型的屬性，例如，應用哪種字型、字型大小以及是否加粗、斜體等。
文字佈局樣式：影響文字間距和其他佈局特徵的屬性，例如，允許操作行和字母之間的間距，以及文字在內容框中的對齊方式。

注意： 請記住，元素內的文字作為一個整體受到影響。你不能選擇和樣式化文字的子部分，除非你將它們包裝在適當的元素中（例如 <span> 或 <strong>），或者使用文字特定的偽元素，如 ::first-letter（選擇元素文字的第一個字母）、::first-line（選擇元素文字的第一行）或 ::selection（選擇當前被游標高亮的文字）。

字型

讓我們直接來看一下樣式化字型的屬性。在這個例子中，我們將對以下 HTML 示例應用一些 CSS 屬性

html

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago…</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>

字體系列

要為文字設定不同的字型，你使用 font-family 屬性——這允許你為瀏覽器指定一個字型（或字型列表）以應用於選定的元素。瀏覽器只有在訪問網站的機器上可用時才會應用字型；如果不可用，它將只使用瀏覽器預設字型。一個簡單的示例如下所示

css

p {
  font-family: "Arial";
}

這將使頁面上的所有段落都採用 Arial 字型，該字型在任何計算機上都可以找到。

注意： Scrimba 的網頁安全字型 ^{MDN 學習夥伴} scrim 提供了一個互動式指南，解釋了字型的重要性、網頁安全字型以及如何在 CSS 中指定字型——以及一個測試你知識的挑戰。

網頁安全字型

談到字型可用性，只有一定數量的字型在所有系統上普遍可用，因此可以放心地使用。這些就是所謂的網頁安全字型。

大多數時候，作為網頁開發者，我們希望對用於顯示文字內容的字型有更具體的控制。問題在於如何知道我們的網頁在使用者的計算機上可以使用哪些字型。在所有情況下，我們都無法知道這一點，但網頁安全字型已知在大多數常用作業系統（Windows、macOS、最常見的 Linux 發行版、Android 和 iOS）上都可用。

實際的網頁安全字型列表會隨著作業系統的發展而變化，但至少目前可以合理地將以下字型視為網頁安全字型（其中許多字型因微軟在 90 年代末和 2000 年代初的 Web 核心字型 倡議而普及）

名稱	通用型別	注意
Arial	sans-serif	通常認為，將 Helvetica 作為 Arial 的首選替代字型是一個最佳實踐，因為儘管它們的字體面幾乎相同，但 Helvetica 被認為具有更好的形狀，即使 Arial 的可用性更廣。
Courier New	monospace	有些作業系統有一個 Courier New 字型的替代版本（可能更舊），稱為 Courier。最佳實踐是同時使用這兩種字型，將 Courier New 作為首選替代字型。
Georgia	serif
Times New Roman	serif	有些作業系統有一個 Times New Roman 字型的替代版本（可能更舊），稱為 Times。最佳實踐是同時使用這兩種字型，將 Times New Roman 作為首選替代字型。
Trebuchet MS	sans-serif	使用這種字型時應小心——它在移動作業系統上並不廣泛可用。
Verdana	sans-serif

注意： 在各種資源中，cssfontstack.com 網站維護著一個在 Windows 和 macOS 作業系統上可用的網頁安全字型列表，這可以幫助你決定哪些字型對你的使用是安全的。

注意： 有一種方法可以隨網頁下載自定義字型，讓你以任何你想要的方式自定義字型使用：網頁字型。這稍微複雜一些，我們將在模組後面的另一篇文章中討論。

預設字型

CSS 為字型定義了五個通用名稱：serif、sans-serif、monospace、cursive 和 fantasy。這些名稱非常通用，從這些通用名稱使用的確切字體面可能因每個瀏覽器和顯示它們的每個作業系統而異。它代表了一種最壞的情況，瀏覽器將盡力提供一種看起來合適的字型。serif、sans-serif 和 monospace 相當可預測，應該會提供合理的結果。另一方面，cursive 和 fantasy 不太可預測，我們建議非常謹慎地使用它們，並隨用隨測。

這五個名稱定義如下

術語	定義	示例
`serif`	帶有襯線（在某些字型中，筆畫末端看到的裝飾和其他小細節）的字型。	`My big red elephant` `body { font-family: serif; }`
`sans-serif`	沒有襯線的字型。	`My big red elephant` `body { font-family: sans-serif; }`
`monospace`	每個字元寬度相同的字型，通常用於程式碼列表。	`My big red elephant` `body { font-family: monospace; }`
`cursive`	旨在模仿手寫字型的字型，具有流暢的連筆。	`My big red elephant` `body { font-family: cursive; }`
`fantasy`	旨在具有裝飾性的字型。	`My big red elephant` `body { font-family: fantasy; }`

字型堆疊

由於你無法保證網頁上要使用的字型可用（即使是網頁字型也可能因某種原因失敗），你可以提供一個字型堆疊，以便瀏覽器有多種字型可供選擇。這涉及到 font-family 值，該值由逗號分隔的多個字型名稱組成，例如：

css

p {
  font-family: "Trebuchet MS", "Verdana", sans-serif;
}

在這種情況下，瀏覽器從列表的開頭開始，檢視該字型是否在機器上可用。如果可用，它將該字型應用於選定的元素。如果不可用，它會轉到下一個字型，依此類推。

在字型堆疊的末尾提供一個合適的通用字型名稱是一個好主意，這樣，如果沒有列出的任何字型可用，瀏覽器至少可以提供一個大致合適的字型。為了強調這一點，如果沒有任何其他選項可用，段落將獲得瀏覽器預設的襯線字型——這通常是 Times New Roman——這對於無襯線字型來說是不可取的！

注意： 雖然你可以使用包含空格的字體系列名稱，例如 Trebuchet MS，而無需引用名稱，但為了避免轉義錯誤，建議引用包含空格、數字或除連字元以外的標點符號的字體系列名稱。

警告： 任何可能被誤解為通用系列名稱或 CSS 範圍關鍵字的字體系列名稱都必須加引號。雖然字體系列名稱可以作為 <custom-ident> 或 <string> 包含，但與 CSS 範圍屬性值（如 initial 或 inherit）相同或與通用字體系列名稱（如 sans-serif 或 fantasy）相同的字體系列名稱必須作為帶引號的字串包含。否則，字體系列名稱將被解釋為等效的 CSS 關鍵字或通用系列名稱。當用作關鍵字時，通用字體系列名稱——serif、sans-serif、monospace、cursive 和 fantasy——以及全域性 CSS 關鍵字不得加引號，因為字串不會被解釋為 CSS 關鍵字。

字體系列示例

讓我們在之前的示例中新增內容，為段落設定無襯線字型

css

p {
  color: red;
  font-family: "Helvetica", "Arial", sans-serif;
}

這給了我們以下結果：

字型大小

在我們之前模組的CSS 值和單位文章中，我們回顧了長度和大小單位。字型大小（使用 font-size 屬性設定）可以採用這些單位中的大多數（以及其他單位，例如百分比）測量的值；但是，最常用的文字大小單位是

px（畫素）：文字所需的高度畫素數。這是一個絕對單位——它在幾乎任何情況下都會在頁面上產生相同的字型最終計算值。
em：1 em 等於我們當前樣式化元素的父元素上設定的字型大小（更具體地說，是父元素中包含的大寫字母 M 的寬度）。如果你有很多巢狀元素設定了不同的字型大小，這可能會變得難以計算，但它是可以做到的，如下所示。為什麼還要費勁呢？一旦你習慣了，它就非常自然，你可以使用 em 來設定所有東西的大小，而不僅僅是文字。你可以使用 em 來設定整個網站的大小，這使得維護變得容易。
rem：這些與 em 的工作方式相同，只是 1 rem 等於文件根元素（即 <html>）上設定的字型大小，而不是父元素。這使得計算字型大小的數學變得容易得多。

元素的 font-size 繼承自該元素的父元素。這一切都始於整個文件的根元素——<html>——其標準 font-size 在瀏覽器中設定為 16px。根元素內的任何段落（或其他沒有瀏覽器設定不同大小的元素）的最終大小都將為 16px。其他元素可能具有不同的預設大小。例如，h1 元素的預設大小為 2em，因此其最終大小將為 32px。

當你開始更改巢狀元素的字型大小時，事情會變得更加棘手。例如，如果你的頁面中有一個 <article> 元素，並將其 font-size 設定為 1.5 em（這將計算出最終大小為 24 px），然後希望 <article> 元素內的段落的計算字型大小為 20 px，你會使用什麼 em 值？

html

<!-- document base font-size is 16px -->
<article>
  <!-- If my font-size is 1.5em -->
  <p>My paragraph</p>
  <!-- How do I compute to 20px font-size? -->
</article>

你需要將其 em 值設定為 20/24，即 0.83333333 em。數學可能很複雜，因此你需要小心如何設定樣式。最好儘可能使用 rem 以保持簡單，並儘可能避免設定容器元素的 font-size。

字型樣式、字型粗細、文字轉換和文字裝飾

CSS 提供了四個常用屬性來改變文字的視覺粗細/強調

font-style：用於開啟或關閉斜體文字。可能的值如下（你很少會使用這個，除非你因為某種原因想要關閉一些斜體樣式）
- normal：將文字設定為正常字型（關閉現有斜體）。
- italic：將文字設定為使用字型的斜體版本，如果可用；如果不可用，它將用傾斜代替模擬斜體。
- oblique：將文字設定為使用斜體字型的模擬版本，透過傾斜正常版本建立。
font-weight：設定文字的粗細。如果有很多字型變體可用（例如 -light、-normal、-bold、-extrabold、-black 等），則有許多值可用，但實際上你很少會使用除 normal 和 bold 以外的任何值
- normal, bold：正常和粗體字型粗細。
- lighter, bolder：將當前元素的粗細設定為比其父元素的粗細輕一步或重一步。
- 100 – 900：數字粗細值，如果需要，提供比上述關鍵字更細粒度的控制。
text-transform：允許你設定字型進行轉換。值包括
- none：阻止任何轉換。
- uppercase：將所有文字轉換為大寫。
- lowercase：將所有文字轉換為小寫。
- capitalize：將所有單詞的首字母大寫。
- full-width：將所有字形轉換為以固定寬度正方形書寫，類似於等寬字型，允許對齊例如拉丁字元和亞洲語言字形（如中文、日文、韓文）。
text-decoration：設定/取消設定字型的文字裝飾（你主要會用它來取消連結的預設下劃線）。可用值有
- none：取消任何已有的文字裝飾。
- underline：文字下劃線。
- overline：文字上劃線。
- line-through：文字刪除線。
你應該注意，text-decoration 可以同時接受多個值，如果你想同時新增多個裝飾，例如，text-decoration: underline overline。還要注意，text-decoration 是 text-decoration-line、text-decoration-style 和 text-decoration-color 的簡寫屬性。你可以使用這些屬性值的組合來建立有趣的效果，例如：text-decoration: line-through red wavy。

讓我們在示例中新增其中幾個屬性

css

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: "Helvetica", "Arial", sans-serif;
}

我們的新結果如下

文字陰影

你可以使用 text-shadow 屬性為文字應用陰影。它最多接受四個值，如下例所示

css

text-shadow: 4px 4px 5px red;

這四個屬性如下

陰影相對於原始文字的水平偏移量——這可以採用大多數可用的 CSS 長度和大小單位，但你最常使用 px；正值將陰影向右移動，負值向左移動。此值必須包含。
陰影相對於原始文字的垂直偏移量。這與水平偏移量類似，只是它將陰影向上/向下移動，而不是向左/向右移動。此值必須包含。
模糊半徑：值越高意味著陰影分散得越廣。如果未包含此值，則預設為 0，表示沒有模糊。這可以採用大多數可用的 CSS 長度和大小單位。
陰影的基本顏色，可以採用任何 CSS 顏色單位。如果未包含，則預設為 currentColor，即陰影的顏色取自元素的 color 屬性。

多個陰影

你可以透過包含多個用逗號分隔的陰影值，為同一文字應用多個陰影，例如

css

h1 {
  text-shadow:
    1px 1px 1px red,
    2px 2px 1px red;
}

如果我們將此應用於 Tommy The Cat 示例中的 <h1> 元素，我們將得到以下結果

注意： 你可以在 Sitepoint 文章使用 CSS text-shadow 兼職中檢視更多有趣的 text-shadow 用法示例。

文字佈局

基本字型屬性介紹完畢，現在讓我們看看可以用來影響文字佈局的屬性。

文字對齊

text-align 屬性用於控制文字在其包含內容框中的對齊方式。可用值如下所示。它們的工作方式與常規文字處理應用程式中的方式大致相同

left：文字左對齊。
right：文字右對齊。
center：文字居中。
justify：使文字分散開，改變單詞之間的間距，使所有文字行的寬度相同。你需要小心使用——它看起來可能很糟糕，尤其是當應用於包含許多長單詞的段落時。如果你打算使用它，你還應該考慮同時使用其他東西，例如 hyphens，以便將一些較長的單詞跨行斷開。

如果我們將 text-align: center; 應用於示例中的 <h1>，我們將得到以下結果

h1 {
  text-align: center;
}

行高

line-height 屬性設定每行文字的高度。此屬性不僅可以接受大多數長度和大小單位，還可以接受無單位值，該值充當乘數，通常被認為是最佳選擇。使用無單位值時，font-size 會被乘以併產生 line-height。正文文字在行間距適當的情況下通常看起來更美觀，也更容易閱讀。推薦的行高約為 1.5 – 2（雙倍行距）。要將我們的文字行設定為字型高度的 1.6 倍，我們將使用

css

p {
  line-height: 1.6;
}

將其應用於示例中的 <p> 元素將給出此結果

字母和單詞間距

letter-spacing 和 word-spacing 屬性允許你設定文字中字母和單詞之間的間距。你不會經常使用這些，但可能會發現它們對於獲得特定外觀或提高特別密集的字型的可讀性很有用。它們可以接受大多數長度單位。

為了說明，我們可以對 HTML 示例中每個 <p> 元素的第一行應用一些單詞和字母間距，使用

css

p::first-line {
  letter-spacing: 4px;
  word-spacing: 4px;
}

這會使我們的 HTML 呈現為

其他值得一看的屬性

以上屬性為你提供瞭如何在網頁上開始樣式化文字的想法，但還有更多屬性你可以使用。我們只想在這裡涵蓋最重要的屬性。一旦你習慣了使用上述屬性，你還應該探索以下屬性

字型樣式

font-variant：在小型大寫字母和正常字型替代之間切換。
font-kerning：開啟和關閉字型字偶間距選項。
font-feature-settings：開啟和關閉各種 OpenType 字型功能。
font-variant-alternates：控制給定字型的替代字形的使用。
font-variant-caps：控制替代大寫字形的使用。
font-variant-east-asian：控制東亞文字（如日語和中文）替代字形的使用。
font-variant-ligatures：控制文字中使用的連字和上下文形式。
font-variant-numeric：控制數字、分數和序數標記的替代字形的使用。
font-variant-position：控制以小尺寸作為上標或下標定位的替代字形的使用。
font-size-adjust：獨立於實際字型大小調整字型的視覺大小。
font-stretch：在給定字型的可能替代拉伸版本之間切換。
text-underline-position：指定使用 text-decoration-line 屬性 underline 值設定的下劃線的位置。
text-rendering：嘗試執行一些文字渲染最佳化。

文字佈局樣式

text-indent：指定文字內容第一行開頭之前應留出的水平空間量。
text-overflow：定義如何向用戶提示未顯示的溢位內容。
white-space：定義如何處理元素內部的空白和相關的換行符。
word-break：指定是否在單詞內斷行。
direction：定義文字方向。（這取決於語言，通常最好讓 HTML 處理這部分，因為它與文字內容相關。）
hyphens：開啟和關閉支援語言的連字元。
line-break：放寬或加強亞洲語言的斷行。
text-align-last：定義塊的最後一行或強制換行前的一行的對齊方式。
text-orientation：定義行中文字的方向。
overflow-wrap：指定瀏覽器是否可以在單詞內部斷行以防止溢位。
writing-mode：定義文字行是水平還是垂直佈局，以及後續行的流動方向。

字型速記

許多字型屬性也可以透過簡寫屬性 font 進行設定。它們的書寫順序如下：font-style、font-variant、font-weight、font-stretch、font-size、line-height 和 font-family。

在所有這些屬性中，只有 font-size 和 font-family 是使用 font 簡寫屬性時必需的。

在 font-size 和 line-height 屬性之間必須放置一個斜槓。

一個完整的示例如下所示

css

font:
  italic normal bold normal 3em/1.5 "Helvetica",
  "Arial",
  sans-serif;

文字樣式練習

好的，輪到你了。對於這個任務，我們沒有為你準備任何具體的練習。我們只是希望你好好玩玩一些字型/文字佈局屬性。看看你自己能想出什麼！

單擊下面程式碼塊中的**“播放”**以在 MDN Playground 中編輯示例。
在提供的空 p { } 規則中新增一些宣告，以改變所提供文字的樣式。盡情發揮創意。

如果你犯了錯誤，可以使用 MDN Playground 中的“重置”按鈕清除你的工作。請參閱文章中前面的部分，以查詢有關你可以設定的字型和文字樣式的更多資訊。

html

<p>Some sample text for your delight</p>

css

p {

}

總結

我們希望你喜歡本文中的文字操作！下一篇文章將為你提供有關 HTML 列表樣式化的所有必要知識。

另見

關於 CSS font-family 屬性的一切，explainers.dev
網頁安全字型, Scrimba ^{MDN 學習夥伴}

幫助改進 MDN

瞭解如何貢獻

此頁面由 MDN 貢獻者最後修改於 2025 年 10 月 13 日。

在 GitHub 上檢視此頁面 • 報告此內容問題