文字和字體排版

CSS Podcast - 036：文字和字體

文字是網路的核心構成要素之一。

建立網站時，您不一定要設定文字樣式；HTML 實際上具備一些相當合理的預設樣式。

不過，文字可能構成網站的大部分內容，因此不妨多方嘗試，增添一些樣式。只要變更幾項基本屬性，即可大幅提升使用者的閱讀體驗！

在本單元中，我們會先介紹一些基本的 CSS 字型屬性，例如 font-family、font-style、font-weight 和 font-size。接著，我們會深入瞭解會影響文字段落的屬性，例如 text-indent 和 word-spacing。完成模組後，部分更進階的主題，例如可變字型和虛擬元素。

變更字體

瀏覽器支援

  • 1
  • 12
  • 1
  • 1

資料來源

使用 font-family 變更文字字體。

font-family 屬性接受以半形逗號分隔的字串清單，可以是參照「特定」或「通用」的字型系列。特定字型系列是用引號括住的字串，例如「Helvetica」、「EB Garamond」或「Times New Roman」。一般字型系列包括 serif、sans-serif 和 monospace 等關鍵字 (請參閱 MDN 選項完整清單)。瀏覽器會顯示清單中第一個可用的字體。

使用 font-family 時，建議您指定至少一個通用字型系列，以免使用者的瀏覽器沒有您偏好的字型。一般來說，備用一般字型系列應該與您偏好的字型相似：如果使用 font-family: "Helvetica" (a Sans Serif 字型系列)，則備用字型應是 sans-serif。

使用斜體和斜體字型

瀏覽器支援

  • 1
  • 12
  • 1
  • 1

資料來源

使用 font-style 設定文字是否應為斜體。「font-style」接受下列其中一個關鍵字：normal、italic 和 oblique。

將文字設為粗體

瀏覽器支援

  • 2
  • 12
  • 1
  • 1

資料來源

使用 font-weight 可設定文字的「粗體」。此屬性接受關鍵字值 (normal、bold)、相對關鍵字值 (lighter、bolder) 和數值 (100 到 900)。

關鍵字 normal 和 bold 分別等於 400 和 700 的數值。

lighter 和 bolder 是按照父項元素計算而得。請參閱 MDN 的「相對權重平均值」一文，當中提供瞭如何判定這個值的實用圖表。

變更文字大小

瀏覽器支援

  • 1
  • 12
  • 1
  • 1

資料來源

使用 font-size 來控製文字元素的大小。此屬性接受長度值、百分比和一些關鍵字值。

除了長度和百分比值外，font-size 還接受一些絕對關鍵字值 (xx-small、x-small、small、medium、large、x-large、xx-large) 和一些相對關鍵字值 (smaller、larger)。相對值是相對於父項元素的 font-size。

變更行與行之間的距離

瀏覽器支援

  • 1
  • 12
  • 1
  • 1

資料來源

使用 line-height 指定元素中每一行的高度。此屬性接受數字、長度、百分比或關鍵字 normal。一般來說，建議使用數字，而不要使用長度或百分比，以免繼承問題。

變更字元之間的空格

瀏覽器支援

  • 1
  • 12
  • 1
  • 1

資料來源

使用 letter-spacing 可控製文字中字元之間的水平空間。這個屬性可接受 em、px 和 rem 等長度值。

請注意，指定的值會「增加」字元之間的自然空間數量。在下面的示範中，請嘗試選取個別字母，查看其上下黑邊的大小以及使用 letter-spacing 的變化。

變更字詞之間的空格

瀏覽器支援

  • 1
  • 12
  • 1
  • 1

資料來源

您可以使用 word-spacing 來增加或減少文字中每個字詞之間的空格。這個屬性可接受 em、px 和 rem 等長度值。請注意，您指定的長度除了一般間距以外，還會用於額外空格。這表示 word-spacing: 0 相當於 word-spacing: normal。

font 簡寫

您可以使用簡寫 font 屬性，一次設定多個字型相關屬性。可能的屬性清單如下：font-family、font-size、font-stretch、font-style、font-variant、font-weight 和 line-height。

如要深入瞭解如何排序這些屬性，請參閱 MDN 的 font 文章。

變更文字大小寫

瀏覽器支援

  • 1
  • 12
  • 1
  • 1

資料來源

使用 text-transform 修改文字的大小寫，不必變更基礎 HTML。此屬性接受以下關鍵字值：uppercase、lowercase 和 capitalize。

為文字加上底線、底線和換行符號

瀏覽器支援

  • 1
  • 12
  • 1
  • 1

資料來源

使用 text-decoration 在文字中新增一行。底線是最常用的項目，但你也可以在文字上方或直接加入幾行！

text-decoration 屬性是以下詳述具體屬性的簡寫。

text-decoration-line 屬性接受關鍵字 underline、overline 和 line-through。您也可以為多行指定多個關鍵字。

text-decoration-color 屬性可設定 text-decoration-line 所有裝飾的顏色。

text-decoration-style 屬性接受關鍵字 solid、double、dotted、dashed 和 wavy。

text-decoration-thickness 屬性可接受任何長度值，並設定 text-decoration-line 所有裝飾的筆劃寬度。

text-decoration 屬性是上述所有屬性的簡寫。

為文字加入縮排

瀏覽器支援

  • 1
  • 12
  • 1
  • 1

資料來源

使用 text-indent 可在文字區塊中加入縮排。這個屬性會採用長度 (例如 10px、2em) 或內含區塊寬度的百分比。

處理溢位或隱藏內容

瀏覽器支援

  • 1
  • 12
  • 7
  • 1.3

資料來源

使用 text-overflow 指定隱藏內容的呈現方式。有以下兩個選項：clip (預設) 會截斷溢位位置中的文字；ellipsis 則會在溢位點顯示刪節號 (...)。

控制空白字元

瀏覽器支援

  • 1
  • 12
  • 1
  • 1

資料來源

white-space 屬性是用來指定元素中空白字元的處理方式。詳情請參閱 white-space 有關 MDN 的文章。

white-space: pre 可用於轉譯 ASCII 藝術，或謹慎地縮排程式碼區塊。

控製字詞換行方式

瀏覽器支援

  • 1
  • 12
  • 15
  • 3

資料來源

使用 word-break 變更字詞溢出行時的「毀損」方式。根據預設，瀏覽器不會分割字詞。將 word-break 的關鍵字值 break-all 用於會指示瀏覽器視需要分割個別字元的字詞。

變更文字對齊方式

瀏覽器支援

  • 1
  • 12
  • 1
  • 1

資料來源

使用 text-align 指定區塊或表格儲存格元素中的文字水平對齊方式。此屬性接受關鍵字值 left、right、start、end、center、justify 和 match-parent。

left 和 right 值會將文字分別與區塊的左側和右側對齊。

使用 start 和 end 表示在目前書寫模式下，每一行文字的開頭和結尾的位置。因此，start 會對應至英文的 left，而以從右至左 (RTL) 書寫的阿拉伯指令碼對應 right。屬於邏輯對齊方式，詳情請參閱邏輯屬性模組。

使用 center 將文字與區塊的中心對齊。

justify 的值會自動整理文字並變更字詞間距，讓文字行與區塊的左側和右側邊緣對齊。

變更文字方向

瀏覽器支援

  • 2
  • 12
  • 1
  • 1

資料來源

使用 direction 設定文字方向，可以是 ltr (從左到右，預設) 或 rtl (從右到左)。部分語言 (例如阿拉伯文、希伯來文或波斯文) 的書寫方式為從右到左，請使用 direction: rtl。如果是英文和其他由左至右的語言，請使用 direction: ltr。

變更文字流動

瀏覽器支援

  • 48
  • 12
  • 41
  • 10.1

資料來源

使用 writing-mode 變更文字的流動及排列方式。預設值為 horizontal-tb，但您也可以針對要水平排列的文字，將 writing-mode 設為 vertical-lr 或 vertical-rl。

變更文字方向

瀏覽器支援

  • 48
  • 79
  • 41
  • 14

資料來源

使用 text-orientation 指定文字字元的方向。此屬性的有效值為 mixed 和 upright。只有在 writing-mode 設為 horizontal-tb 以外的項目時，這個屬性才適用。

為文字加上陰影

瀏覽器支援

  • 2
  • 12
  • 3.5
  • 1.1

資料來源

使用 text-shadow 為文字加上陰影。這個屬性需要三個長度 (x-offset、y-offset 和 blur-radius) 和一個顏色。

詳情請參閱「陰影」單元中的 text-shadow 部分。

可變字型

一般來說，「一般」字型需要針對不同版本的字體 (例如粗體、斜體或壓縮色) 匯入不同的檔案。可變字型是可在單一檔案中包含多種字體變化的字型。

Roboto Flex 採用隨機寬度和重量的隨機組合

詳情請參閱關於 Variable Fonts 的文章。

虛擬元素

::first-letter 和 ::first-line 虛擬元素

瀏覽器支援

  • 1
  • 12
  • 1
  • 1

資料來源

::first-letter 和 ::first-line 虛擬元素會分別指定文字元素的第一個字母和第一行。

::selection 虛擬元素

瀏覽器支援

  • 1
  • 12
  • 62
  • 1.1

資料來源

使用 ::selection 虛擬元素變更使用者所選文字的外觀。

使用這個虛擬元素時，只能使用特定 CSS 屬性：color、background-color、text-decoration、text-shadow、stroke-color、fill-color、stroke-width。

font-variant

瀏覽器支援

  • 1
  • 12
  • 1
  • 1

資料來源

font-variant 屬性是數個 CSS 屬性的簡寫，可讓您選擇 small-caps 和 slashed-zero 等字型變化版本。這個簡寫的 CSS 屬性為 font-variant-alternates、font-variant-caps、font-variant-east-asian、font-variant-ligatures 和 font-variant-numeric。如要進一步瞭解各項屬性的用法，請點選各屬性的連結。

隨堂測驗

測驗您對網頁字體排版的相關知識

下列哪個關鍵字可做為 font-family 一般備用選項？

serif
答對了！
monospace
答對了！
italic
請再試一次。italic 是font-style的有效關鍵字，而不是 font-family。
sci-fi
請再試一次。然而，fantasy 是 font-family 的有效一般備用項。
sans-serif
答對了！
helvetica
請再試一次。"Helvetica" 並非通用關鍵字，而是特定字型系列。

下列哪個敘述可用於將每個字詞的第一個字母轉換為大寫？例如 This is a sentence. ➡ This Is A Sentence.

text-capitalize: true;
請再試一次。
text-case: capitalize;
請再試一次。
text-transform: capitalize;
答對了！
font-style: capitals;
請再試一次。
font-variant: capitalize;
請再試一次。

是非題：使用 text-orientation 將文字靠左、靠右或置中。

對
請再試一次。text-orientation 會變更行中字母的旋轉效果。
false
正確！text-orientation 會變更行中字母的旋轉效果。使用 text-align 將文字靠左、靠右或置中對齊 (還有更多！)。

哪一項 CSS 屬性可用於變更行間間距？

line-spacing
請再試一次。
leading
請再試一次。「前置」是字體排版中行之間的正確詞，但這不是有效的 CSS 屬性。
baseline-distance
請再試一次。
line-height
答對了！

資源