文字和字體排版

文字是網頁的核心構成元素之一。

製作網站時,不一定要為文字設定樣式;HTML 其實有幾種相當合理的預設樣式。

不過,網站內容大多是文字,因此不妨加入一些樣式來妝點網站。只要變更幾個基本屬性,就能大幅改善使用者的閱讀體驗!

在本單元中,我們將從 @font-face 規則開始,讓您將自訂字型匯入網頁。這可確保您取得所需的確切排版,不受使用者安裝的字型影響。

接著,我們將介紹重要的 CSS 字型屬性,包括 font-familyfont-stylefont-weightfont-size。這些基本知識可讓您針對樣式和可讀性操作文字。

我們也會談到段落專屬屬性,例如 text-indentword-spacing,最後再討論進階主題,例如可變字型和擬造元素,進一步強化您的排版控制。

我們會提供實用的範例和提示,讓您更深入瞭解並運用這些 CSS 技巧。

@font-face 規則

@font-face CSS at-rule 在網頁設計中非常實用,可讓您指定及使用自訂字型來顯示文字。@font-face 的優點在於其多功能性:您可以從遠端伺服器或使用者裝置上安裝的字型取得字型來源。

語法

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff")
}

描述項

ascent-override
自訂升降指標,影響基準線上方的空間。
descent-override
調整下降指標,影響基準線下方的空間。
font-display
根據下載狀態控管字型的顯示行為。
font-family
在字型相關屬性中使用字型的名稱。
font-stretch
設定可接受的水平縮放比例,可指定為單一值或範圍。
font-style
定義字型樣式,支援斜體樣式的角度範圍。
font-weight
:決定字型的粗細或可用的粗細範圍。
font-feature-settings
可存取 OpenType 字型功能。
font-variation-settings
提供可變字型設定的微調控制功能。
line-gap-override
覆寫字型的預設行距。
size-adjust
將縮放比例係數套用至字型輪廓和測量基準。
src
定義字型來源 (本機或遠端)。這是 @font-face 規則的必要條件。在 src 中結合 url()local() 是常見的策略,可在可用時使用本機字型,並將遠端字型檔案設為備用。瀏覽器會根據宣告順序優先處理資源,因此 local() 通常應置於 url() 之前。
unicode-range
限制此字型應使用的字元。

說明

@font-face 讓設計人員可以使用自訂的字體,擺脫「網頁安全」字型的限制。local() 函式可在使用者的裝置上搜尋字型,提供不必連上網路的流暢體驗。

字型 MIME 類型

格式 MIME 類型
TrueType font/ttf
OpenType font/otf
Web Open Font Format font/woff
Web Open Font Format 2 font/woff2

@font-face 和 font-family 的差異

在 CSS 中,@font-facefont-family 經常會讓人混淆,但兩者的作用不同。

如先前所述,@font-face 是用來定義您想在網頁應用程式中使用的任何自訂字型。它會告訴瀏覽器下載字型的位置、載入期間的顯示方式 (使用 font-display 屬性),並指定要下載的字元子集 (使用 unicode-range)。

相反地,font-family 是 CSS 規則中使用的 CSS 屬性,可將特定字型或字型清單指派給元素。font-family 下列出的字型可以是網頁安全字型、系統字型,或使用 @font-face 定義的自訂字型。

總而言之,@font-face 會宣告字型並為其命名,而 font-family 會將此宣告的字型套用至 HTML 元素。

以下是同時使用這兩種方法的範例:

<table>
  <thead>
    <tr>
      <th><p><pre>
@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
}

body {
  font-family: "CustomFont", Arial, sans-serif;
}

在本例中,@font-face 會定義「CustomFont」,並告知瀏覽器該字型的存放位置。font-family 屬性會將其套用至 body 元素,如果「CustomFont」不可用,則會使用 Arial 做為備用字型。

變更字體

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

font-family 屬性接受以半形逗號分隔的字串清單,可參照特定一般字型系列。特定字型系列為引號字串,例如「Helvetica」、「EB Garamond」或「Times New Roman」。泛型字型系列是 serifsans-serifmonospace 等關鍵字 (請參閱 MDN 的完整選項清單)。瀏覽器會顯示提供清單中第一個可用的字型。

使用 font-family 時,您應至少指定一個通用字型系列,以防使用者的瀏覽器沒有您偏好的字型。一般來說,備用一般字型系列應與您偏好的字型相似:如果使用 font-family: "Helvetica" (無襯線字型系列),備用字型應為 sans-serif

使用斜體和斜體字型

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

使用 font-style 設定文字是否應為斜體。font-style 可接受下列任一關鍵字:normalitalicoblique

將文字設定為粗體

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

使用 font-weight 設定文字的「粗體」程度。這個屬性可接受關鍵字值 (normalbold)、相對關鍵字值 (lighterbolder) 和數值 (100900)。

關鍵字 normalbold 分別等同於數值 400700

關鍵字 lighterbolder 的計算方式會以父項元素為依據。請參閱 MDN 的相對權重含義,瞭解如何判斷這個值。

變更文字大小

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

使用 font-size 控制文字元素的大小。這個屬性可接受長度值、百分比和少數關鍵字值。

除了長度和百分比值之外,font-size 也接受部分絕對關鍵字值 (xx-smallx-smallsmallmediumlargex-largexx-large) 和幾個相對關鍵字值 (smallerlarger)。相對值是相對於父元素的 font-size

變更行間距

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

變更字元間的空格

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

使用 letter-spacing 控制文字中字元之間的水平間距。此屬性可接受長度值,例如 empxrem

請注意,指定的值會增加字元之間的自然空格量。在以下示範中,請選取個別字母,查看其邊框大小,以及在 letter-spacing 的影響下如何變化。

變更字詞之間的空格

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

使用 word-spacing 可增加或減少文字中每個字詞之間的空格長度。此屬性可接受長度值,例如 empxrem。請注意,您指定的長度是指額外的空白,不含一般間距。這表示 word-spacing: 0 等同於 word-spacing: normal

font 速記法

您可以使用簡寫 font 屬性,一次設定多個字型相關屬性。可能的屬性清單包括 font-familyfont-sizefont-stretchfont-stylefont-variantfont-weightline-height

請參閱 MDN 的font文章,進一步瞭解如何排序這些屬性。

變更文字大小寫

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

使用 text-transform 即可修改文字大小寫,而無須變更基礎 HTML。這個屬性可接受以下關鍵字值:uppercaselowercasecapitalize

為文字加上底線、上線和貫穿線

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

使用 text-decoration 在文字中新增行。最常見的是下底線,但也可以在文字上方或穿過文字中間加上線條!

text-decoration 屬性是較具體屬性的簡寫,詳情請見下文。

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

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

text-decoration-style 屬性可接受關鍵字 soliddoubledotteddashedwavy

text-decoration-thickness 屬性可接受任何長度值,並設定所有修飾圖案的筆劃寬度,從 text-decoration-line 開始。

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

在文字中加入縮排

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

使用 text-indent 在文字區塊中加入縮排。此屬性可接受長度 (例如 10px2em) 或包含區塊寬度的百分比。

處理溢出或隱藏的內容

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 7.
  • Safari: 1.3.

Source

使用 text-overflow 指定隱藏內容的呈現方式。有兩個選項:clip (預設),會在溢位點截斷文字;ellipsis,會在溢位點顯示刪節號 (…)。

控制空白

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

white-space 屬性可用來指定如何處理元素中的空白字元。詳情請參閱 MDN 的 white-space 文章

white-space: pre 可用於算繪 ASCII 圖片或經過精心縮排的程式碼區塊。

控制字詞斷行方式

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 3.

Source

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

變更文字對齊方式

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

使用 text-align 指定區塊或表格儲存格元素中文字的水平對齊方式。這個屬性可接受關鍵字值 leftrightstartendcenterjustifymatch-parent

leftright 分別將文字對齊至區塊的左側和右側。

使用 startend 代表目前書寫模式中一行文字的開頭和結尾位置。因此,start 會對應至英文的 left,以及由右至左 (RTL) 書寫的阿拉伯文 right。這些是邏輯對齊方式,詳情請參閱「邏輯屬性」單元。

使用 center 將文字置中對齊。

justify 的值會自動排版文字並調整字間距,讓文字與區塊的左右邊緣對齊。

變更文字方向

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

使用 direction 設定文字方向,可選 ltr (從左到右,預設) 或 rtl (從右到左)。阿拉伯文、希伯來文或波斯文等部分語言的書寫方向是由右至左,因此應使用 direction: rtl。針對英文和所有由左至右的語言,請使用 direction: ltr

變更文字流程

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Source

使用 writing-mode 變更文字流動和排列的方式。預設值為 horizontal-tb,但您也可以將 writing-mode 設為 vertical-lrvertical-rl,以便將文字水平流動。

變更文字方向

Browser Support

  • Chrome: 48.
  • Edge: 79.
  • Firefox: 41.
  • Safari: 14.

Source

使用 text-orientation 指定文字中字元的方向。此屬性的有效值為 mixedupright。只有在 writing-mode 設為 horizontal-tb 以外的值時,這個屬性才會相關。

為文字加入陰影

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Source

使用 text-shadow 為文字加上陰影。這個屬性會預期三個長度 (x-offsety-offsetblur-radius) 和一個顏色。

如要進一步瞭解,請參閱「陰影」單元中的 text-shadow 部分

變數字型

一般來說,「一般」字型需要匯入不同版本的字體 (例如粗體、斜體或窄體) 的不同檔案。變數字型是指在單一檔案中包含多種字體變化的字型。

Roboto Flex 的寬度和粗細隨機組合

詳情請參閱這篇關於可變字型文章

擬元素

::first-letter::first-line 擬似元素

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

::selection 擬造元素

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 62.
  • Safari: 1.1.

Source

使用 ::selection 擬似元素,變更使用者選取文字的外觀。

使用這個擬造元素時,只能使用特定的 CSS 屬性:colorbackground-colortext-decorationtext-shadowstroke-colorfill-colorstroke-width

font-variant

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

font-variant 屬性是許多 CSS 屬性的簡寫,可讓您選擇 small-capsslashed-zero 等字型變化。這個速記符號包含的 CSS 屬性為 font-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numeric。請查看每個資源的連結,進一步瞭解其用途。

進行隨堂測驗

測驗您對網路版面配置的認識

下列哪個關鍵字可用做 font-family 一般替代項目?

helvetica
italic
serif
sans-serif
sci-fi
monospace

哪個陳述式可用來將每個字詞的第一個字母轉換為大寫?例如 This is a sentence.This Is A Sentence.

font-style: capitals;
text-case: capitalize;
text-capitalize: true;
text-transform: capitalize;
font-variant: capitalize;

是非題:使用 text-orientation 將文字對齊左側、右側或置中。

哪個 CSS 屬性可用於變更文字行間的距離?

baseline-distance
line-height
leading
line-spacing

資源