iT邦幫忙

2023 iThome 鐵人賽

DAY 28
0
Modern Web

Super Easy CSS,極度簡單:寫出好的 CSS,從零開始前端生涯系列 第 29

#27 網頁載入字體、Icon Font 與 CSS font-family、font-weight

  • 分享至 

  • xImage
  •  

本篇同步發表於我的 Hashnode 部落格:
Eva Chen | 網頁設計師下班後 (hashnode.dev)


↓ 今日學習重點 ↓

  • 了解字體的基本知識

  • 了解網頁如何載入字體

  • 了解 CSS font-family、font-weight

  • 了解如何使用 Icon Font

我們關於版面編排與 RWD 的部分終於告一個段落了,現在大觀念了解後,接下來我們要深入各個樣式的細節,例如文字、圖片、圖形、互動等等。首先,我們將從文字的部分開始。

在網頁設計中,字型滿重要的,可以為網頁增加視覺吸引力、改善閱讀體驗,並且讓所有使用者的字體體驗一致。在這篇我們將學習字體的基本知識,以及如何在網頁中使用字體、Icon Font。


常見的字體的格式

字體常見的格式共有以下幾種:

  1. TTF (TrueType):
    Windows 跟 Mac OS 最常用的字型格式,較舊的系統能支援,但是檔案偏大。

  2. OTF (OpenType):
    Adobe 跟微軟一起改良了 TTF ,平滑、精細,品質表現比 TTF 好,如果字體有 TTF 與 OTF 可以下載,建議下載這種。

  3. WOFF (Web Open Font Format):
    是由 Mozilla、微軟、Opera 一起為網站打造的字型格式,將 OTF 或 TFF 加上 Metadata 壓縮而成,是 W3C 官方建議的字型格式。

  4. WOFF2 (Web Open Font Format 2):
    第二代的 WOFF,壓縮得更小,是目前最適合網頁的字體格式。

延伸閱讀:簡介字型檔格式:TTF、EOT、WOFF、WOFF2-黑暗執行緒


字體的種類

在網頁中,我們最常使用的字體種類是「Serif 襯線體/明體」與「Sans-Serif 無襯線體/黑體」:

1. Serif 襯線體/明體

Serif 有著襯線裝飾(serifs)的特點,在字型的末端具有小小勾起的裝飾。在中文裡稱呼它為明體。

這種字體通常被認為更適合印刷品和長篇文章,因為它能幫助人在閱讀時更順暢。可是在螢幕顯示上,容易受到光暈的影響,而顯得比較不明顯。例如:

延伸閱讀:桃園機場用新細明體,有什麼問題? - INSIDE

當然為了達到各種不同的風格,並不是在螢幕上就不能用,而是要考慮到字級大小與目標族群是否合適。

這種字體給人的感覺通常是古典的、經典的。

2. Sans-Serif 無襯線體/黑體

Sans-Serif 去掉了襯線裝飾,字體末端平滑俐落。在中文裡稱呼它為黑體。

和襯線體相反,由於尾巴沒有裝飾,所以比較不會受到光暈的影響,所以常常被用在數位系統、看板上。

這種字體給人感覺充滿了現代感。

3. Monospace 等寬字體

這種字體在我們使用的程式碼編輯器中常常看見,在網頁上的程式碼顯示段落也會套用這種字體。前面兩種字體為了設計視覺上的和諧,每個字的實際寬度並不一定是相等的,這樣在寫程式時反而會導致上下行不對齊,結果變得不易閱讀程式碼。

所以,一般來說程式碼會使用等寬字體顯示,常見的是打字機的那種字體。

4. 其他

其他的字體還有:手寫體、書法體、圓體、藝術字體等等。通常為了吸睛,特殊字體會被當成標題,而不會被當成內文,因為內文若是太花俏反而會不易閱讀。


在網頁中載入字體

現在,讓我們試試看在網頁中使用不同的字體。

1. 使用 <link> 元素載入字體

通常我們會在 HTML 的 <head> 使用 <link> 載入字體,越早載入字體使用者體驗會越好,所以放在網頁的一開頭 <head> 中載入。

我們以使用 Google 提供的字體為例,會使用以下方式載入:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap" rel="stylesheet">

這邊 Google 建議我們可以加上 <link rel="preconnect">,事先告訴瀏覽器接下來要載入外部網站的資源,告訴它這個外部資源的 domain,讓瀏覽器可以提早建立連線,讓載入速度更快一些。

因為中文字體通常檔案比較大,速度的考量尤其重要。

2. 使用 @import 載入字體

另外一種載入方式是使用,CSS 的 @import 載入字體:
(這兩種方式擇一就好,個人偏好第一種)

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap");

3. 使用 font-family 指定字型

一旦我們有載入了字型,在 CSS 的部分,我們就可以使用 font-family 設定字體:

body{
	font-family: Arial, "Noto Sans TC", sans-serif;
}

這裡我們使用逗號隔開字體,如果文字在這個字體中沒有對應的字的話,就會套用下一個字體。一般來說,最後一個設定的字體會是 sans-serifserif 這類的通用字型名稱(generic-family),指的是使用者電腦中預設的無襯線體或襯線體。

以上的例子,英文字會使用 Arial 這個字型;而中文字在 Arial 字型找不到編碼後,就會使用思源黑體(Noto Sans TC)。

如果字體為一個單字,就可以不需要使用冒號框 "" 起來,直接寫單字就好。

其餘的通用字型名稱(generic-family),請參考:

font-family - CSS: Cascading Style Sheets | MDN

如果我們沒有載入字體,但是在 CSS 中有設定的話,瀏覽器會去找使用者電腦中的字體,這樣就會導致有些人可以正常顯示字體,有些人則不行,除非你使用的是系統內建字體(如:Arial、Time New Roman 是許多人電腦中有的字體)。


讓我們再試試載入一個特殊字體看看,換了個字體就文青了起來:
(Code Pen 中 HTML <head> 的設定在 Settings 中)

DEMO 連結:Font ChenYuluoyan

附帶一提,這個辰宇落雁體是由台灣高中生製作的,很優秀!

Github:Chenyu-otf/chenyuluoyan_thin: 辰宇落雁體


字體粗細 font-weight

我們還可以為這個字體設定粗細,只不過要載入對應粗細的字體才有作用喔!

p {
    font-weight: 400;
}

CSS 中常見的粗細,有 10 級可以設定:

font-weight 對應字型的命名
100 Thin
200
300 Light
400(等同 normal,預設值) Regular
500 Medium
600
700(等同 bold Bold
800
900 Black
1000

另外,還可以設定 lighterbolder ,不過他們是依據由父層繼承而來的 font-weight 而有不同,詳細請見下表:

由父層繼承的 font-weight bolder lighter
100 400 100
200 400 100
300 400 100
400 700 100
500 700 100
600 900 400
700 900 400
800 900 700
900 900 700

常見的網頁字體資源

1. Google Font

連結:Browse Fonts - Google Fonts

我們在一開始的範例就是使用 Google Font,Google Font 非常齊全,有各種受歡迎的字體,而且是免費的。只是可惜的是,中文字體只有兩種,就是思源黑體(Noto Sans TC)與思源明體(Noto Serif TC)。

所以在設計時,有的時候我會使用日文字體,比較多樣化,只是容易缺字,與筆順與中文有一些些不同。

2. Adobe Font

連結:Adobe Fonts | 探索無限字體

Adobe Font 也是非常有名,也很齊全的字體庫,只不過要使用的話,需要有訂閱他們的方案才能使用。

3. justfont

連結:字型列表 - jf store

justfont 是台灣很有名研究中文字體的公司,之前很火紅的金萱體、蘭陽明體就是他們設計的,他們字體都非常好看!大部分需要購買才能使用。不過,他們曾經有為了回饋大眾,而推出了粉圓體,非常可愛實用。

另外,他們也有經營 Facebook 粉絲專頁與社團:字戀字嗨,裡面很多關於有趣字體的討論,有興趣的朋友可以去看看。


常見的網頁 Icon Font

網頁上很多 icon 圖形其實是做成了字體,這樣能夠方便我們變大變小變顏色。

1. Google Material Symbols / Icon

連結:Material Symbols and Icons - Google Fonts

Google 推出的 Icon 也很齊全,共有兩種,第一種是舊版本的 Material Icon,第二種則是新版本的 Material Symbols,新版本可以調整 Icon 的粗細、預設大小。

它們的字體運作原理,是將特定的「英文單字」顯示為不同的圖示。不過,這樣有個問題,就是當使用瀏覽器的翻譯功能時,「英文單字」被翻譯了,圖示就會不見,然後變成被翻譯的文字。QQ

所以使用時建議考慮一下使用者會不會有需要翻譯的行為,再決定要不要使用它。

2. Font Awesome

連結:Font Awesome

Font Awesome 是比起 Material Symbols / Icon 更齊全的網頁 icon,但是它需要註冊並且建立專案,有一些 icon 要額外收費。

它的字體運作原理,是將是特定的「代碼」顯示為不同的圖示。它是使用偽元素 ::beforecontent 設定這個代碼,例如:content: "\f167";

3. Taiwan Icon Font

連結:Taiwan Icon Font

台灣也有專屬於自己的 Icon Font,是由生活在台南的日本設計師 holoko 和居住在台灣的英國程式設計師 Rob 共同開發,是免費的。雖然我沒有用過,但這些 Icon 應該滿適合使用在國內旅遊的專案上。

它的字體運作原理和 Font Awesome 一樣。

4. 單純只使用 CSS 設定 Icon Font

知道了 Icon Font 的運作原理後,我們也可以用和他們同樣的方式,使用 CSS 設定 Icon 顯示在不同地方,例如改變清單 <ul> 的圖示(不過我這裡是使用舊版的 Font Awesome 作 DEMO):

DEMO 連結: List with font awesome icon


參考資料:

網頁中英文字型(font-family)跨平台設定最佳化@WFU BLOG
Font-family - 金魚都能懂的CSS必學屬性 - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天 (ithome.com.tw)


↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

如果你喜歡我的創作,還想看看其他有趣的分享與日常,
可以追蹤我的 IG @im1010ioio,或者是🧋送杯珍奶鼓勵我,謝謝你🥰。

Eva Chen 送杯珍奶鼓勵我


上一篇
#26 CSS Container Queries 容器查詢:隨著自己變大變小變畫面
下一篇
#28 CSS 文字過長、行數過多顯示點點點、文字自動折行、強制換行:white-space、word-break、-webkit-line-clamp 的妙用
系列文
Super Easy CSS,極度簡單:寫出好的 CSS,從零開始前端生涯37
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言