CSS - 網頁字型：初學者指南

你好，未來的網頁設計師們！我很興奮能成為你們在CSS網頁字型世界的引路人。作為一個教了多年計算機科學的人，我可以告訴你們，理解字型就像學習一門新語言 - 起初可能會讓人覺得有點困難，但一旦你掌握了要領，你會對它如何轉化你的網頁感到驚奇！

CSS - Web safe fonts

什麼是網頁字型？

在我們深入細節之前，讓我們從基礎開始。網頁字型是可以用在你的網站上的自定義字型，無論用戶的電腦上是否安裝了它們。它們就像給你的網站一個獨特的聲音！

為什麼網頁字型很重要？

想像一下，如果世界上所有的書都使用同一种字型。無聊吧？網頁字型讓你可以表達你的網站個性，並提高可讀性。它們是讓你的網站從眾多網站中脫穎而出的秘密配方！

CSS網頁字型 - 字型格式類型

現在，讓我們來討論不同的字型格式。這就像在冰淇淋中选择不同的口味 - 每一種都有它自己的特點！

格式	描述	準則支持
TTF/OTF	TrueType 字型 / OpenType 字型	所有現代瀏覽器
WOFF	網頁 Open 字型格式	所有現代瀏覽器
WOFF2	網頁 Open 字型格式 2	多數現代瀏覽器
EOT	嵌入式 OpenType	Internet Explorer
SVG	可縮放向量圖形	舊版 iOS 版本

如果這現在讓你覺得像一團字母湯，別擔心。我們會在進行的過程中逐個解釋！

CSS網頁字型 - 關鍵點

在我們開始寫代碼之前，讓我們覆蓋一些關鍵點：

網頁字型讓你可以在你的網站上使用自定義字型。
它們從伺服器上載入，而不是從用戶的電腦上。
你可以使用像Google Fonts這樣的服務，或者自己托管字型。
存在不同的字型格式以確保瀏覽器兼容性。
@font-face 規則用於在CSS中定義自定義字型。

CSS網頁字型 - @font-face 關於規則

現在，讓我們深入一些代碼！@font-face 規則就像向你的網頁介紹一種新字型。這是它的樣子：

@font-face {
font-family: 'MyAwesomeFont';
src: url('path/to/my-awesome-font.woff2') format('woff2'),
url('path/to/my-awesome-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}

讓我們分解這個：

font-family：這是你給字型的名字。你稍後會用這個名字應用字型到元素上。
src：這指定了找到字型文件的位置和它的格式。
font-weight 和 font-style：這些定義了字型的特徵。

定義了你的字型後，你可以像這樣使用它：

body {
font-family: 'MyAwesomeFont', sans-serif;
}

這告訴瀏覽器，“嘿，使用 MyAwesomeFont，但如果找不到，就使用任何無襪體字型。”

CSS網頁字型 - @font-face / font-stretch

font-stretch 屬性就像字型的瑜伽課。它讓你可以拉長或壓縮字型。這是怎麼使用的：

@font-face {
font-family: 'StretchyFont';
src: url('path/to/stretchy-font.woff2') format('woff2');
font-stretch: ultra-expanded;
}

.stretched-text {
font-family: 'StretchyFont';
font-stretch: 150%;
}

這會讓你的文本看起來像是去健身房練過一樣，變得有點肌肉！

CSS網頁字型 - 在線字型服務

使用在線字型服務就像點外賣而不是自己煮 - 它方便且有許多選擇。Google Fonts 是一個流行的選擇。這是怎麼用的：

前往 Google Fonts 選擇你喜歡的字型。
复制提供的鏈接標籤並將其粘貼到你的 HTML <head> 中：

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

在你的 CSS 中使用字型：

body {
font-family: 'Roboto', sans-serif;
}

然後，voila！你现在正在使用從 Google Fonts 加載的自定義字型。

CSS網頁字型 - 引入字型

包括網頁字型的另一種方法是使用 @import 規則。這就像邀請一種字型參加你的 CSS 派對。這是怎麼工作的：

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
font-family: 'Roboto', sans-serif;
}

這種方法讓你可以將所有的字型聲明保留在你的 CSS 文件中，有些開發者喜歡這種組織方式。

結論

恭喜你！你剛剛踏入了 CSS 網頁字型的精彩世界。記住，就像學習任何新技能一樣，熟能生巧。不要害怕嘗試不同的字型，並看看它們如何改變你的網頁的外觀和感覺。

當我們結束時，這裡有一個來自我教學經驗的小故事：我曾經有一個學生在網頁設計方面遇到困難。她不明白為什麼她的網站看起來那麼... 平淡。然後我們學習了網頁字型，她就好像開啟了燈泡。突然之間，她的網站從無聊變得美麗。這就是網頁字型的力量！

所以，勇往直前，玩轉字型，並看著你的網頁變得生動。快樂編程，並記住 - 在網頁設計的世界裡，唯一的限制是你的想象力！

Credits: Image by storyset