HTML - 字體：網頁文字樣式入門指南

你好，有志成為網頁開發者的你！今天，我們將要進入HTML字體的精彩世界。作為你親切友善的電腦老師，我將指導你如何讓網頁文字看起來棒極了。我們開始吧！

HTML - Fonts

什麼是HTML字體？

在我們深入探討之前，讓我們先了解在HTML中我們所謂的「字體」是什麼。簡單來說，字體就是你看到的網頁上的文字樣式。它可以大、可以小、可以粗體、可以斜體，甚至可以是花體字。HTML提供了我們控制文字外觀的方法，使我們的網頁更加視覺吸引人，並且更容易閱讀。

現在，讓我們來谈谈所謂的「網頁安全字體」。想像你正在給朋友寫信。你希望他們能夠閱讀，對吧？網頁安全字體就像是使用一種大家都能理解的通用書寫風格。

網頁安全字體是指在大多數電腦和設備上都有可能存在的字體。使用這些字體，我們可以確保我們的網頁在不同的系統上看起来相似。

以下是一些常見的網頁安全字體表格：

讓我們來動手寫一些代碼！以下是如何在HTML中使用字體的一些範例：

<p style="font-family: Arial, sans-serif;">這段文字使用Arial字體。</p>

在這個範例中，我們告訴瀏覽器將文字顯示為Arial字體。其中的「sans-serif」部分是在Arial不可用時的備用選項。

<p style="font-family: 'Times New Roman', Times, serif;">這段文字可能使用Times New Roman、Times或任何serif字體。</p>

在這裡，我們提供了多種字體選項。瀏覽器會先嘗試使用Times New Roman，如果第一個不可用，則使用Times，如果前兩個都沒有，則使用任何serif字體。

<p style="font-family: Arial, sans-serif; font-size: 18px; font-weight: bold;">這段文字是Arial字體，大小加大，並且加粗。</p>

在這個範例中，我們不僅設置了字體家族，還設置了其大小和粗細。這給我們對文字外觀有了更多的控制。

現在，讓我們為我們的生活——或者說，我們的文字，添加一些顏色！

<p style="color: blue;">這段文字是藍色的！</p>

簡單吧？我們使用color屬性來設置文字顏色。

<p style="color: #FF5733;">這段文字有一個自定義顏色。</p>

十六進制顏色給我們提供了更精確的顏色控制。在這個例子中，我們使用了一種特定的橙色。

現在，我有一個小故事要告訴你。從前有一個HTML元素叫做<basefont>。它用於為整個HTML文件設置默認字體。然而，就像技術中的許多事物一樣，它已經過時，並且在HTML5中不再受支援。

我們現在不再使用<basefont>，而是使用CSS來為整個文件設置默認字體。以下是如何操作的：

<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333333;
}
</style>

這段CSS代碼放在HTML文件的<head>部分，為<body>中的所有文字設置了默認字體（Arial）、大小（16像素）和顏色（深灰色）。

好了，各位！我們已經踏上了HTML字體的旅程，從網頁安全選項到設置顏色和樣式。記住，精通字體的關鍵是實踐。嘗試不同的組合，玩轉大小和顏色，看看哪一種對你的網頁最適合。

當我們結束時，這裡有一個來自我多年教學經驗的小提示：不要害怕嘗試！網頁開發的美妙之處在於你總是可以撤銷並重新嘗試。所以勇往直前，大膽使用你的字體，並且開心地編程！

Credits: Image by storyset