如果您沒有為文字指定任何樣式,瀏覽器會自行套用預設樣式。這就是所謂的使用者代理程式樣式表,可能會因瀏覽器而異。使用者也可以設定自己的文字顯示偏好設定。
如果您未指定行長度,瀏覽器會在螢幕邊緣自動換行。因此網頁文字預設為採用回應式設計,因為文字會隨著使用者的可視區域調整。
但即使文字填滿螢幕,也不代表文字更加舒適。良好的字體排版就是以適當的方式呈現文字。比起選擇適合的字型,字型排版有更多的選擇。需要考量使用者的偏好、文字大小、行長度以及文字行間的距離。
文字大小
我們很難判斷網路上的文字大小。
如果有人使用較小的螢幕,對方螢幕可能會與您的雙眼距離很近 (只有一隻手遠距離) 可能是很安全的做法。
不過,隨著螢幕尺寸不斷擴大,連結更難連結。筆電尺寸的螢幕可能就接近觀眾附近,但寬螢幕的桌機螢幕尺寸則與電視螢幕差不多。人們坐在離電腦螢幕前的手臂長度很遠,但是離電視遠遠。
儘管如此,雖然您不清楚使用者與螢幕有多遠,但您可以試著使用文字大小,這樣就能適當分辨出適當文字。配合較小的螢幕和較大的文字,使用較小的字體。
您可以使用媒體查詢功能,在螢幕大小增加時變更 font-size
屬性。
@media (min-width: 30em) {
html {
font-size: 125%;
}
}
@media (min-width: 40em) {
html {
font-size: 150%;
}
}
@media (min-width: 50em) {
html {
font-size: 175%;
}
}
@media (min-width: 60em) {
html {
font-size: 200%;
}
}
縮放文字
在特定中斷點切換固定文字大小相當容易。另一種回應方式是讓使用者的裝置寬度影響文字大小。
CSS 中的 vw
單位代表「可視區域寬度」。將字型大小連結至可視區域寬度後,文字就會隨瀏覽器寬度而增加和縮小。因此難以預測文字大小在任何特定寬度下的大小,不過,使用者則可根據使用者的瀏覽器寬度調整文字大小。
請務必在字型大小宣告中單獨使用 vw
。
html { font-size: 2.5vw; }
否則使用者將無法調整文字大小。如果您混合使用相對單位 (例如 em
、rem
或 ch
),文字將會可調整大小。CSS calc()
函式相當適合派上用場。
html { font-size: calc(0.75rem + 1.5vw); }
讓瀏覽器進行計算。這會導致難以預測文字大小在任何特定寬度下的效果,但您知道文字大小會落在正確的範圍內。使用者的瀏覽器會負責判斷實際文字大小的計算方式。
但現在文字在狹窄的螢幕上可能會「過小」,在寬螢幕上也過大。
限製文字
您可能不希望將文字縮到最小,使其變得極度極限。你可以使用 CSS clamp()
函式控制縮放功能的開始和結束位置。這會將資源調度降到特定範圍。
clamp()
函式與 calc()
函式類似,但需要三個值。中間值與您傳遞至 calc()
的值相同。開頭值會指定最小尺寸,在本範例中為 1 分鐘,以免超過使用者偏好的字型大小。結尾值可指定大小上限。
html {
font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}
現在文字大小會根據使用者螢幕的比例縮小和放大,但文字大小一律不會小於 1rem
或 2rem
。
文行長度
網路上並非列印網路,但我們可以從印刷世界學習經驗,並在網路上應用到網路上。
在經典圖書《The Elements of Typographic Style》(泰波圖形風格的元素) 中,Robert Bringhurst 在他的經典書籍中談論了線條長度 (或度量):
普遍認為,從 45 到 75 個字元的任何內容,都是滿意的單欄行長,而對於文字大小的 Serif 文字表面所設的單欄網頁長度。普遍認為包含 66 個字元的字母和空格。執行多欄作業時,平均長度上限為 40 至 50 個字元。
您無法直接在 CSS 中設定線條長度。沒有 line-length
屬性。不過,您可以限制容器的寬度,避免文字太寬。max-inline-size
屬性非常適合使用這個屬性。
請勿使用固定單位 (例如 px
) 設定行長度。使用者可以縮放字型,而線條長度也應隨之調整。使用相對單位,例如 rem
或 ch
。
article { max-inline-size: 700px; }
article { max-inline-size: 66ch; }
使用 ch
單位寬度會使新的行以該字型大小達到第 66 個字元。
行高
雖然 CSS 中沒有任何 line-length
屬性,但其中包含 line-height
屬性。
較短的文字行有較大的 line-height
值。但如果你針對長行文字使用較大的 line-height
值,讀者的眼睛會不太容易從一行結尾處到下一行的開頭。
article {
max-inline-size: 66ch;
line-height: 1.65;
}
blockquote {
max-inline-size: 45ch;
line-height: 2;
}
請在 line-height
宣告中使用無單位值。這可確保行高是相對於 font-size
。
line-height: 24px;
line-height: 1.5;
組合和規模
建立使用者介面時,請務必排定階層的優先順序,以更清楚明瞭的方式呈現網頁流程。最好的做法是設計系統內建的字體排版比例。
網站字型
字體就像是字詞的語音輸入。為了在網路世界中最久使用,字型選項非常少。系統字型是唯一選項。現在,你可以選擇與內容風格相符的網頁字型。
使用 @font-face
告訴瀏覽器尋找網路字型檔案的位置。使用 woff2 做為網頁字型格式。新版本不僅獲得完善支援,效能也大幅提升。
@font-face {
font-family: Roboto;
src: url('/fonts/roboto-regular.woff2') format('woff2');
}
body {
font-family: Roboto, sans-serif;
}
不過,您新增的每個網路字型檔案都可能會拉長網頁載入時間,導致使用者體驗不佳。請注意,設計並非只是最後的像素外觀。這些像素的繪製速度是使用者體驗的關鍵部分。迅速流暢的使用者體驗,能為使用者帶來良好的體驗。
正在載入字型
您可以要求瀏覽器盡快開始下載字型檔案。在參照網路字型檔案的文件 head
中加入 link
元素。值為 preload
的 rel
屬性會指示瀏覽器優先處理該檔案。值為 font
的 as
屬性會告訴瀏覽器這是哪一種檔案。type
屬性可讓您指定更明確的檔案。
<link href="/fonts/roboto-regular.woff2" type="font/woff2"
rel="preload" as="font" crossorigin>
即使您是自行管理字型檔案,也必須加入 crossorigin
屬性。
使用 CSS font-display
屬性,指示瀏覽器如何管理將系統字型切換為網頁字型的方式。您可以選擇在網頁字型載入之前,完全不顯示文字。您可以選擇立即顯示系統字型,然後在載入後切換至網路字型。這兩種策略各有優缺點。如果您等到網頁字型下載後才顯示任何文字,使用者可能會在空白頁面上感到很失望。如果您先以系統字型顯示文字,之後再切換為網頁字型,使用者可能會發現網頁的內容有明顯改變。
理想的做法是先等候一小段時間再顯示任何文字。如果網頁字型在該時間之前載入,系統會以網頁字型顯示文字,且不會發生內容位移。如果時間過後仍未載入網頁字型,系統會使用系統字型顯示文字,因此至少使用者能夠閱讀內容。
如果您仍希望網站字型在最終載入時取代系統字型,請使用 swap
的 font-display
值。
body {
font-family: Roboto, sans-serif;
font-display: swap;
}
如要在文字轉譯後持續採用系統字型,請使用 fallback
的 font-display
值。
body {
font-family: Roboto, sans-serif;
font-display: fallback;
}
可變字型
如果您使用多種字體粗細或樣式,可能會使用許多不同的字型檔案,而每種粗細或樣式都有個別的字型檔案。
可變字型只需使用一個檔案即可解決這個問題。有別於一般、粗體、額外的粗體等項目專用的個別檔案,而是採用回應式字型檔案。其中包含了從多種權重或樣式顯示所需的所有資訊。
這表示單一可變字型檔案比單一一般字型檔案還大,但單一可變字型檔案可能會比多個一般字型檔案還小。如果您要使用多種粗細,可以視情況調整字型來提高成效。
良好的網頁字體排版,並不是只與設計人員相關。回應式字體排版也在於尊重使用者的裝置和網路連線。因此無論呈現方式,都能呈現出絕佳的視覺效果。
現在您對回應式文字都相當熟悉,現在可以進一步瞭解回應式圖片。
隨堂測驗
測驗您對字體排版的相關知識
必須新增樣式,文字才會在可視區域中自動換行。
clamp()
適用於流體字體排版,因為
calc()
函式clamp()
設定字體排版。clamp()
設定字體排版。在本指南中,建議使用哪種 line-height
值?
24px
line-height
的像素值。2rem
1.5
2vw
line-height
) 發生問題。「font-display
」的用途為何?
block
或 inline-block
。