HTML - 字體參考

親愛的網頁開發新手們！今天，我們將要進入HTML字體的精彩世界。作為你們親切友善的電腦老師，我非常興奮能夠引導你們開展這次旅程。記住，就像為特殊場合挑選合適的服裝一樣，選擇完美的字體可以讓你的網頁閃耀耀眼！

HTML - Fonts Reference

語法

我們從基礎開始。在HTML中，我們使用<font>標籤來指定文字的字體、大小和顏色。然而，重要的是要注意這個標籤在HTML5中已被棄用，這意味著不再推薦使用它。但別擔心！我們會為了歷史背景學習它，然後探索現代的替代方法。

基本語法如下：

<font face="font_family" size="size" color="color">這裡放置文字</font>

HTML 字體標籤

現在，讓我們分解<font>標籤的屬性：

face：這個屬性指定字體家族。
size：這個屬性設置字體的大小。範圍從1（最小）到7（最大）。
color：這個屬性決定文字的顏色。

以下是一個例子：

<font face="Arial" size="5" color="blue">歡迎來到我的網站！</font>

這將會顯示“歡迎來到我的網站！”使用Arial字體，大小5，藍色。

網絡安全字體

網絡安全字體是在不同操作系統上通常可用的字體。使用這些字體可以確保你的文字對大多數用戶來說能夠按預期顯示。以下是一些流行的網絡安全字體的表格：

字體名稱	示例
Arial	The quick brown fox jumps over the lazy dog
Verdana	The quick brown fox jumps over the lazy dog
Helvetica	The quick brown fox jumps over the lazy dog
Times New Roman	The quick brown fox jumps over the lazy dog
Courier	The quick brown fox jumps over the lazy dog

HTML 字體示例

讓我們通過一個有趣的例子來將我們的知識付諸實踐：

<html>
<head>
<title>我最喜歡的水果</title>
</head>
<body>
<h1><font face="Arial" color="red">我最喜歡的水果</font></h1>
<p><font face="Verdana" size="4" color="green">蘋果很好吃！</font></p>
<p><font face="Courier" size="3" color="orange">橙子多汁！</font></p>
<p><font face="Times New Roman" size="5" color="purple">葡萄很甜！</font></p>
</body>
</html>

在這個例子中，我們創建了一個關於最喜歡水果的頁面。每種水果都用不同的字體、大小和顏色來描述。這展示了如何使用字體在網頁中創造視覺層次和強調。

微軟系統的字體

微軟系統預裝了很多字體。以下是一些流行的：

Arial
Calibri
Cambria
Georgia
Tahoma
Times New Roman

Macintosh系統的字體

Macintosh系統也有它們自己的默認字體：

Helvetica
Arial
Times New Roman
Courier
Verdana
Georgia

Unix系統的字體

Unix系統，包括Linux發行版，通常包括以下字體：

DejaVu Sans
Liberation Sans
FreeSans
Nimbus Sans L

現在我知道你在想什麼：“但是老師，你說<font>標籤已經被棄用了。我們應該用什麼來代替？”問得好！在現代網頁開發中，我們使用CSS（層叠樣式表）來設置我們的文字樣式。以下是一個快速的例子：

<html>
<head>
<title>現代字體樣式</title>
<style>
h1 {
font-family: Arial, sans-serif;
color: red;
}
.green-text {
font-family: Verdana, sans-serif;
font-size: 18px;
color: green;
}
.orange-text {
font-family: 'Courier New', monospace;
font-size: 16px;
color: orange;
}
.purple-text {
font-family: 'Times New Roman', serif;
font-size: 20px;
color: purple;
}
</style>
</head>
<body>
<h1>我最喜歡的水果</h1>
<p class="green-text">蘋果很好吃！</p>
<p class="orange-text">橙子多汁！</p>
<p class="purple-text">葡萄很甜！</p>
</body>
</html>

這實現了我們前一個例子的相同結果，但使用了現代的CSS技術，而不是棄用的<font>標籤。

記住，選擇正確的字體就像為你的菜肴挑選完美的香料一樣 - 它可以讓你的網頁閃耀。但始終優先考慮可讀性。一個花哨的字體可能看起來很酷，但如果你的用戶無法閱讀它，它就沒有起到它應有的作用。

當我們結束時，我想分享一個小故事。當我第一次開始網頁開發時，我對字體非常興奮，以至於我頁面上的每一段都使用不同的字體。它看起來像張勒索信！從我的錯誤中學習 - 一貫性是關鍵。

繼續練習，保持好奇心，並且快樂編程！

Credits: Image by storyset