文字和字體排版

CSS Podcast - 036：文字和字體排版

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

您在建立網站時，不一定需要設定文字樣式；HTML 其實也包含相當合理的預設樣式。

不過，網站的大部分內容可能由文字組成，因此建議您多加入一些樣式來美化網站。變更一些基本屬性可大幅改善使用者的閱讀體驗！

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

然後，我們將介紹必要的 CSS 字型屬性，包括 font-family、font-style、font-weight 和 font-size。這些基本概念奠定了操縱文字的可讀性。

在最後，我們也會介紹 text-indent 和 word-spacing 等段落專屬屬性，再探討進階主題 (例如可變字型和虛擬元素)，可進一步修正字體排版控制項。

我們會提供實用的範例和提示，協助您鞏固對這些 CSS 技術的理解與應用。

@font-face 規則

@font-face CSS 規則是網頁設計不可或缺的一環，可讓您指定並使用自訂字型來顯示文字。@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
網頁開啟字型格式 font/woff
Web Open Font Format 2 font/woff2

@font-face 和 font-family 的差異

在 CSS 中，@font-face 和 font-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 屬性將其套用至主體元素，並在無法使用「CustomFont」時，使用於 one 建立備用方案。

變更字體

瀏覽器支援

  • 1
  • 12
  • 1
  • 1

來源

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

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

使用 font-family 時，建議您指定至少一個一般字型系列，以便在使用者的瀏覽器沒有您偏好的字型時派上用場。一般來說，備用一般字型系列應該與您偏好的字型相似：如果使用 font-family: "Helvetica" (aSan-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 屬性可用來指定元素中空白字元的處理方式。詳情請參閱 MDN 的 white-space 文章。

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 的寬度和權重隨機組合

詳情請參閱我們的變數字型相關文章。

虛擬元素

::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 可變更一行文字的旋轉角度。
否
正確！text-orientation 可變更一行文字的旋轉角度。使用 text-align 將文字靠左、靠右或置中對齊 (還有更多功能)。

哪一項 CSS 屬性可用來變更文字行之間的間距？

line-spacing
請再試一次。
leading
請再試一次。開頭是字體排版中行距的正確字詞，但並非有效的 CSS 屬性。
baseline-distance
請再試一次。
line-height
答對了！

���源