如何用CSS更改字體 – 教程

字體是網頁設計中很重要的一個元素，它可以影響到網頁的整體風格和視覺效果。通過使用CSS，我們可以輕鬆地更改網頁上的字體。本篇文章將從多個方面為您詳細闡述如何使用CSS更改字體。

一、使用CSS預定義字體

通過使用CSS中的預定義字體，我們可以輕鬆地設置網頁上的字體。下面是一個示例代碼，您可以將其插入到您的CSS文件中，並將其應用於您的HTML文檔。

body {
    font-family: Arial, sans-serif;
}

在上面的代碼中，我們選擇了一個預定義的字體「Arial」，如果用戶的計算機上沒有安裝該字體，瀏覽器將顯示一個默認字體。另外，當選定的字體無法在用戶計算機上找到時，fallback字體將會顯示，可以保證文字的可讀性。

您可以使用以下代碼設置默認字體大小：

body {
    font-size: 16px;
}

同樣，如果用戶的計算機上沒有安裝所選定的字體，網頁將顯示默認字體。當用戶將滑鼠停留在文字上時，瀏覽器將顯示所使用的字體。

二、使用字體庫來使用自定義字體

字體庫可以讓您從可用字體庫中選擇一個適合自己網站的字體，並將其保存在您的主機上。這使您可以輕鬆地將自定義字體應用於您的網頁。以下是一個使用字體庫的示例代碼：

@font-face {
    font-family: 'Open Sans';
    src: url('OpenSans-Regular-webfont.woff2') format('woff2'),
         url('OpenSans-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

在上面的代碼中，「Open Sans」是新的字體名稱，您可以使用該代碼將其應用於您的網頁。字體文件可以在「src:」後面的URL中找到。

三、使用Google字體庫

Google字體庫是使用Google提供的Web字體的最簡單方法。您可以使用以下代碼將Google字體庫應用於您的網頁：

在上面的代碼中，「Open Sans」是你所選擇的字體名稱，這個字體的名稱將會被嵌入到HTML代碼中。您只需複製並粘貼這一行代碼到你的HTML文件的中即可。

四、使用字體屬性

當您需要進一步自定義您的字體時，您可以使用字體屬性。您可以使用以下代碼調整字體大小和行距：

body {
    font-size: 16px;
    line-height: 1.5;
}

當您使用行高時，您可以將其設置為一個相對值而不是一個固定值，以便使字體更容易閱讀。

五、使用特殊效果

您還可以為您的字體應用一些特殊效果，如陰影或加粗。以下是一些常用的CSS聲明，可幫助您更改字體效果：

/* 使文本加粗 */
font-weight: bold;

/* 增加文本陰影 */
text-shadow: 1px 1px #000;

/* 增加文本斜體 */
font-style: italic;

/* 增加文本下劃線 */
text-decoration: underline;

六、總結

使用CSS更改字體可以使網站看起來更加美觀和專業化。本文從各個方面為您介紹了如何更改字體。無論您是使用預定義字體、使用自定義字體、使用Google字體庫還是添加特殊效果，都需要注意字體的可讀性和適應性，以保證您的網站的用戶體驗。