Fondly: CSS字體聲明指南

一、字體類別

字體類別是定義樣式時需要考慮的一個重要因素。在CSS中，有5種字體類別可供選擇：襯線字體、無襯線字體、等寬字體、手寫字體以及系統字體。

襯線字體包括serif和Georgia；無襯線字體包括sans-serif和Arial；等寬字體包括monospace和Courier New；手寫字體包括cursive和Brush Script MT；系統字體包括system-ui和Helvetica。

下面是一個簡單的字體聲明的示例，其中sans-serif是字體類別：

body {
  font-family: sans-serif;
}

除了聲明單個字體類別外，還可以通過逗號分隔的形式聲明多個字體，這意味着如果第一個選項無法加載，瀏覽器將繼續向下加載其他選項，直到成功為止。

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

二、字體粗細

對於字體粗細的控制，可以使用font-weight屬性。它有9個可用值：100、200、300、400、500、600、700、800和900，分別對應於超輕、極輕、輕、正常、中等、半粗、粗、極粗和超粗。

下面是一個示例，將字體設置為加粗：

h1 {
  font-weight: 700;
}

三、字體大小

字體大小的控制可以使用font-size屬性。可以使用絕對單位，如像素（px）、點（pt）或em、cm，也可以使用相對單位，如百分比（%）。建議使用相對單位來定義字體大小，以便網站或應用程序能夠在不同的設備上自適應。

下面是一個示例，將字體大小設置為24像素：

h1 {
  font-size: 24px;
}

四、字體樣式

字體樣式可以使用font-style屬性進行控制。可選值為normal、italic和oblique。大多數字體都只有normal和italic兩種樣式，oblique只是在italic不可用時的替代品。

下面是一個示例，將字體樣式設置為斜體：

em {
  font-style: italic;
}

五、字體變體

如果字體具有變體（例如，在某些字型集中，字母「a」可能有多種形狀），可以使用font-variant屬性將其應用於文本。可選值為normal和small-caps。

下面是一個示例，將字體變體設置為小型大寫字母：

h1 {
  font-variant: small-caps;
}

六、行高

通過line-height屬性可以控制文本的行高。它定義了一個行內框的高度，在行上下分別增加了額外的垂直空間。

下面是一個示例，將行高設置為1.5：

p {
  line-height: 1.5;
}

七、字間距和字母間距

可以使用letter-spacing屬性控制字母之間的間距，使用word-spacing屬性控制單詞之間的間距。這兩個屬性通常不是必需的，除非您在設計時需要手動微調。

下面是一個示例，將字母間距設置為2像素：

h1 {
  letter-spacing: 2px;
}

八、總結

字體聲明是CSS中最常用的屬性之一，也是控制文本外觀的重要手段。通過理解字體類別、粗細、大小、樣式、變體、行高以及字母間距，您可以更靈活地控制文本樣式，從而讓您的網站或應用程序更具個性。