CSS Podcast - 036:文字和字體
文字是網路的核心構成要素之一。
建立網站時,您不一定要設定文字樣式;HTML 實際上具備一些相當合理的預設樣式。
不過,文字可能構成網站的大部分內容,因此不妨多方嘗試,增添一些樣式。只要變更幾項基本屬性,即可大幅提升使用者的閱讀體驗!
在本單元中,我們會先介紹一些基本的 CSS 字型屬性,例如 font-family
、font-style
、font-weight
和 font-size
。接著,我們會深入瞭解會影響文字段落的屬性,例如 text-indent
和 word-spacing
。完成模組後,部分更進階的主題,例如可變字型和虛擬元素。
變更字體
使用 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
。
使用斜體和斜體字型
使用 font-style
設定文字是否應為斜體。「font-style
」接受下列其中一個關鍵字:normal
、italic
和 oblique
。
將文字設為粗體
使用 font-weight
可設定文字的「粗體」。此屬性接受關鍵字值 (normal
、bold
)、相對關鍵字值 (lighter
、bolder
) 和數值 (100
到 900
)。
關鍵字 normal
和 bold
分別等於 400
和 700
的數值。
lighter
和 bolder
是按照父項元素計算而得。請參閱 MDN 的「相對權重平均值」一文,當中提供瞭如何判定這個值的實用圖表。
變更文字大小
使用 font-size
來控製文字元素的大小。此屬性接受長度值、百分比和一些關鍵字值。
除了長度和百分比值外,font-size
還接受一些絕對關鍵字值 (xx-small
、x-small
、small
、medium
、large
、x-large
、xx-large
) 和一些相對關鍵字值 (smaller
、larger
)。相對值是相對於父項元素的 font-size
。
變更行與行之間的距離
使用 line-height
指定元素中每一行的高度。此屬性接受數字、長度、百分比或關鍵字 normal
。一般來說,建議使用數字,而不要使用長度或百分比,以免繼承問題。
變更字元之間的空格
使用 letter-spacing
可控製文字中字元之間的水平空間。這個屬性可接受 em
、px
和 rem
等長度值。
請注意,指定的值會「增加」字元之間的自然空間數量。在下面的示範中,請嘗試選取個別字母,查看其上下黑邊的大小以及使用 letter-spacing
的變化。
變更字詞之間的空格
您可以使用 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
文章。
變更文字大小寫
使用 text-transform
修改文字的大小寫,不必變更基礎 HTML。此屬性接受以下關鍵字值:uppercase
、lowercase
和 capitalize
。
為文字加上底線、底線和換行符號
使用 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
屬性是上述所有屬性的簡寫。
為文字加入縮排
使用 text-indent
可在文字區塊中加入縮排。這個屬性會採用長度 (例如 10px
、2em
) 或內含區塊寬度的百分比。
處理溢位或隱藏內容
使用 text-overflow
指定隱藏內容的呈現方式。有以下兩個選項:clip
(預設) 會截斷溢位位置中的文字;ellipsis
則會在溢位點顯示刪節號 (...)。
控制空白字元
white-space
屬性是用來指定元素中空白字元的處理方式。詳情請參閱 white-space
有關 MDN 的文章。
white-space: pre
可用於轉譯 ASCII 藝術,或謹慎地縮排程式碼區塊。
控製字詞換行方式
使用 word-break
變更字詞溢出行時的「毀損」方式。根據預設,瀏覽器不會分割字詞。將 word-break
的關鍵字值 break-all
用於會指示瀏覽器視需要分割個別字元的字詞。
變更文字對齊方式
使用 text-align
指定區塊或表格儲存格元素中的文字水平對齊方式。此屬性接受關鍵字值 left
、right
、start
、end
、center
、justify
和 match-parent
。
left
和 right
值會將文字分別與區塊的左側和右側對齊。
使用 start
和 end
表示在目前書寫模式下,每一行文字的開頭和結尾的位置。因此,start
會對應至英文的 left
,而以從右至左 (RTL) 書寫的阿拉伯指令碼對應 right
。屬於邏輯對齊方式,詳情請參閱邏輯屬性模組。
使用 center
將文字與區塊的中心對齊。
justify
的值會自動整理文字並變更字詞間距,讓文字行與區塊的左側和右側邊緣對齊。
變更文字方向
使用 direction
設定文字方向,可以是 ltr
(從左到右,預設) 或 rtl
(從右到左)。部分語言 (例如阿拉伯文、希伯來文或波斯文) 的書寫方式為從右到左,請使用 direction: rtl
。如果是英文和其他由左至右的語言,請使用 direction: ltr
。
變更文字流動
使用 writing-mode
變更文字的流動及排列方式。預設值為 horizontal-tb
,但您也可以針對要水平排列的文字,將 writing-mode
設為 vertical-lr
或 vertical-rl
。
變更文字方向
使用 text-orientation
指定文字字元的方向。此屬性的有效值為 mixed
和 upright
。只有在 writing-mode
設為 horizontal-tb
以外的項目時,這個屬性才適用。
為文字加上陰影
使用 text-shadow
為文字加上陰影。這個屬性需要三個長度 (x-offset
、y-offset
和 blur-radius
) 和一個顏色。
詳情請參閱「陰影」單元中的 text-shadow
部分。
可變字型
一般來說,「一般」字型需要針對不同版本的字體 (例如粗體、斜體或壓縮色) 匯入不同的檔案。可變字型是可在單一檔案中包含多種字體變化的字型。
詳情請參閱關於 Variable Fonts 的文章。
虛擬元素
::first-letter
和 ::first-line
虛擬元素
::first-letter
和 ::first-line
虛擬元素會分別指定文字元素的第一個字母和第一行。
::selection
虛擬元素
使用 ::selection
虛擬元素變更使用者所選文字的外觀。
使用這個虛擬元素時,只能使用特定 CSS 屬性:color
、background-color
、text-decoration
、text-shadow
、stroke-color
、fill-color
、stroke-width
。
font-variant
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
會變更行中字母的旋轉效果。哪一項 CSS 屬性可用於變更行間間距?
line-spacing
baseline-distance
line-height
資源
- 字型最佳做法 - 介紹匯入字型、顯示字型,以及在網路上使用字型的最佳做法。
- MDN 基本文字和字型樣式。