css設定頁面字體

CSS是一種用於為網頁賦予樣式的語言，它可以使網站變得更加美觀和易於閱讀。其中字體設定是CSS中最常用且最重要的部分之一，因為合適的字體設定可以提高網站的可讀性和視覺效果。本文將探討如何使用CSS來設定頁面的字體。

一、字體族和字體

在CSS中，字體族（font-family）是指網站中使用的字體系列。例如，我們可以設定字體族為“Arial, sans-serif”，這意味著如果使用者的電腦上沒有安裝Arial字體，那麼CSS將嘗試使用系統預設的無襯線字體。

字體（font）是指字體的特定屬性，包括字體系列、字體大小、字體粗細、字體樣式（如斜體）等。以下是一些常用的CSS字體屬性：

1. font-family: 字體名稱或字體系列。
2. font-size: 字體的大小，可以使用px，em，rem單位或相對大小的百分比。
3. font-weight: 字體的粗細，可以是normal（預設）、bold或數字值（100-900）。
4. font-style: 字體的樣式，可以是normal（預設）、italic或oblique。

二、如何設定頁面字體

在CSS中，有以下三種方法設定字型：

1. 使用@font-face匯入自訂字體：

@font-face {
font-family: custom-font;
src: url('path/to/font.woff2') format('woff2') ;
}

body {
font-family: custom-font, sans-serif;
font-size: 16px;
}

在這個例子中，「custom-font」是我們定義的字體系列，它引用了路徑為"path/to/font.woff2"的字體檔案。然後將該字體應用於body元素並設定了預設字體為sans-serif。

2. 使用Google字體：

Google字體是一個免費的線上字體庫，它提供了數百種字體供選擇。要使用Google字體，請在HTML文件的head部分中加入以下程式碼：

然後將字體套用到元素：

body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}

3. 使用系統預設字體：

如果您希望讓頁面使用系統預設字體，可以使用以下程式碼：

body {
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell, “Helvetica Neue”, sans-serif;
font-size: 16px;
}

系統預設字體往往具有良好的可讀性，因此它是一個很好的選擇。

三、調整字體大小和行高

字體大小和行高是影響可讀性的兩個因素。在CSS中，可以使用以下程式碼來調整字體大小和行高：

body {
font-size: 18px;
line-height: 1.6;
}

其中，line-height是指行高與字體大小的比例，一般情況下，1.4-1.6之間是一個不錯的選擇，這樣可以使得頁面排版美觀，易於閱讀。

四、字體粗細和樣式

字體粗細和樣式也可以影響字體的可讀性和視覺效果。在CSS中，可以使用以下程式碼來更改字體的粗細、樣式或兩者同時更改：

body {
font-weight: bold;
}

p {
font-style: italic;
}

h1 {
font-weight: bold;
font-style: italic;
}

#五、結論

透過合適的字體設置，可以提高網站的可讀性、視覺效果和使用者體驗。在應用程式中，可以根據網站的主題和目標受眾選擇適當的字體族、字體大小、粗細、樣式和行高，這樣可以使網站更加美觀、易於閱讀，並為用戶提供更好的閱讀體驗。

以上是css設定頁面字體的詳細內容。更多資訊請關注PHP中文網其他相關文章！