2.1 font-family屬性
字體在網頁設計中扮演著關鍵角色，影響文本的可讀性和視覺吸引力。
字體系列決定了可以在網頁上使用的字體的整體風格和特性。
在CSS中，字體通常分為三個主要系列：serif、sans-serif和monospace。我們將更詳細地探討每一個。
font-family屬性
font-family屬性用於指定字體系列。可以指定多個字體，用逗號分隔，以便瀏覽器在第一個字體不可用時使用列表中的下一個字體。
多字體使用範例
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
使用示例：
CSS
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
HTML
<body>
<p>此文本使用Helvetica Neue, Helvetica或Arial字體顯示。</p>
</body>
2.2 serif字體系列
有襯線字體（serif）具有附加在字母和符號末端的小線條或筆觸。
這些字體給文本增添了一種更傳統和正式的外觀。
serif字體示例：
- Times New Roman
- Georgia
- Garamond
- Baskerville
使用示例：
CSS
body {
font-family: 'Times New Roman', serif;
}
HTML
<body>
<h1>This is a heading</h1>
<p>這是一段使用serif字體的段落。</p>
</body>
2.3 sans-serif字體系列
無襯線字體（sans-serif）在字母和符號的末端沒有小線條。這些字體看起來更現代和簡約，由於其在屏幕上的良好可讀性，經常用於網頁設計。
sans-serif字體示例：
- Arial
- Helvetica
- Verdana
- Open Sans
CSS
body {
font-family: 'Arial', sans-serif;
}
HTML
<body>
<h1>This is a heading</h1>
<p>這是一段使用sans-serif字體的段落。</p>
</body>
2.4 monospace字體系列
等寬字體（monospace）所有字符的寬度都是一樣的。這類字體經常用於顯示代碼、技術文檔和表格，其中水平對齊的字符很重要。
monospace字體示例：
- Courier New
- Consolas
- Monaco
- Lucida Console
使用示例：
CSS
body {
font-family: 'Courier New', monospace;
}
HTML
<body>
<h1>This is a heading</h1>
<p>這是一段使用monospace字體的段落。</p>
<pre>
function helloWorld() {
console.log("Hello, world!");
}
</pre>
</body>
為了增強網頁的可讀性和風格多樣性，經常使用不同字體系列的組合。例如，標題可以使用serif字體，而主體文本可以使用sans-serif字體。而代碼總是monospace。
GO TO FULL VERSION