在CSS中如何設置字體樣式

一、設置字體樣式的基本語法

CSS中設置字體樣式的基本語法如下：

  font: font-style font-variant font-weight font-size/line-height font-family;

其中，font-size, font-family是必填項，其他項都可以不填。

font-style: 設置字體風格，有常規、斜體、傾斜等樣式可選，常規為 normal，斜體為 italic，傾斜為 oblique。

font-variant: 設置字體變體，有普通和小型大寫字母兩種樣式可選，普通為 normal，小型大寫字母為 small-caps。

font-weight: 設置字體粗細，有常規、粗體等樣式可選，常規為 normal或400，粗體為 bold或700。在常規和粗體之間還有其他的取值，如100表示 thin，900表示 black等。

font-size/line-height: 設置字體大小和行高，字體大小可以是固定大小的數值或相對於父元素的大小，行高可以是數值、百分比或relative關鍵字。

font-family: 設置字體族，可以設置多個字體族，用逗號分開，如果某個字體族不存在，則往後繼續尋找下一個字體族，直到找到可用字體族為止。

例如，可以通過下面的代碼設置一個斜體、粗體、20px大小、Times New Roman字體的文本樣式：

  font: italic bold 20px/1.5 'Times New Roman', serif;

二、設置字體大小和行高

在CSS中，可以通過font-size屬性來設置字體大小，字體大小可以是固定大小的數值或相對於父元素的大小。

例如，設置文本大小為14像素：

  font-size: 14px;

設置文本大小為父元素大小的50%：

  font-size: 50%;

除了font-size屬性，還可以使用line-height屬性來設置行高，行高可以是數值、百分比或relative關鍵字。

例如，設置文本行高為1.5：

  line-height: 1.5;

三、設置字體粗細和風格

在CSS中，可以通過font-weight屬性設置字體粗細，取值為常規、粗體、thin、medium等。

例如，設置文本為粗體：

  font-weight: bold;

除了font-weight屬性，還可以使用font-style屬性來設置字體風格，可選值有常規、斜體、傾斜等。

例如，設置文本為斜體：

  font-style: italic;

四、設置字體族

在CSS中，可以通過font-family屬性設置字體族，如果某個字體族不存在，則往後繼續尋找下一個字體族，直到找到可用字體族為止。

例如，設置文本字體為Arial：

  font-family: Arial, sans-serif;

上面代碼中，“sans-serif”是通用字體族，如果瀏覽器中沒有Arial字體，則會自動選擇系統中能用的通用字體族。

五、其他字體樣式設置

在CSS中，還可以通過font-variant屬性設置小型大寫字母等字體變體，或通過text-transform屬性將文本變換為大寫、小寫或首字母大寫等。

例如，將文本轉換為小型大寫字母：

  font-variant: small-caps;

將文本轉換為大寫：

  text-transform: uppercase;

完整的樣式代碼：

  h1 {
    font: italic bold 30px/1.5 'Times New Roman', serif;
  }

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