CSS font 字體

CSS font 字體

CSS 中常見的字體 (font) 屬性有以下幾種:

  • font-family
  • font-size
  • font-weight
  • font-style
  • font-variant

CSS 字體屬性定義文本的字體系列、大小、加粗、風格(如斜體)和變形(如小型大寫字母)。


如果你希望文檔使用一種sans-serif 字體,但是你並不關心是哪一種字體,以下就是一個合適的聲明:

body {font-family: sans-serif;}

可以通過font-family 屬性設置更具體的字體。

下面的例子為所有h1 元素設置了 "微軟正黑體" 字體:

h1 {font-family: "微軟正黑體";}

如果您對字體非常熟悉,也可以指定一系列類似的字體。需要把這些字體按照優​​先順序排列,然後用逗號進行連接:
p {font-family: '微軟正黑體',Times, TimesNR, 'New Century Schoolbook',
     Georgia, 'New York', serif;}

字體風格

font-style屬性最常用於規定斜體文本。

  • normal - 文本正常顯示
  • italic - 文本斜體顯示
  • oblique - 文本傾斜顯示
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

字體變形

font-variant屬性可以設定小型大寫字母。

小型大寫字母不是一般的大寫字母,也不是小寫字母,這種字母採用不同大小的大寫字母。

p {font-variant:small-caps;}

This is a i2yes

This is a i2yes


字體加粗

font-weight屬性設置文本的粗細。

使用bold 關鍵字可以將文本設置為粗體。

關鍵字100 ~ 900 為字體指定了9 級加粗度。如果一個字體內置了這些加粗級別,那麼這些數字就直接映射到預定義的級別,100 對應最細的字體變形,900 對應最粗的字體變形。數字400 等價於normal,而700 等價於bold。

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

This is  i2yes

This is i2yes

This is i2yes


字體大小

font-size屬性設置文本的大小。

font-size 值可以是絕對或相對值。

絕對值:

  • 將文本設置為指定的大小
  • 不允許用戶在所有瀏覽器中改變文本大小(不利於可用性)
  • 絕對大小在確定了輸出的物理尺寸時很有用

相對大小:

  • 相對於周圍的元素來設置大小
  • 允許用戶在瀏覽器改變文本大小

注意:如果您沒有規定字體大小,普通文本(比如段落)的默認大小是16像素(16px=1em)。

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

在Firefox, Chrome, and Safari 中,可以重新調整以上例子的文本大小,但是在Internet Explorer 中不行。

雖然可以通過瀏覽器的縮放工具調整文本大小,但是這實際上是對整個頁面的調整,而不僅限於文本。

使用em 來設置字體大小,W3C 推薦使用em 尺寸單位。

如果要避免在Internet Explorer 中無法調整文本的問題,許多開發者使用em 單位代替pixels。

1em 等於當前的字體尺寸。如果一個元素的font-size 為16 像素,那麼對於該元素,1em 就等於16 像素。在設置字體大小時,em 的值會相對於父元素的字體大小改變。

瀏覽器中默認的文本大小是16 像素。因此1em 的默認尺寸是16 像素。

可以使用下面這個公式將像素轉換為em:pixels /16= em

h1 {font-size:3.75em;} /* 60px/16=3.75em */ 
h2 {font-size:2.5em;}   /* 40px/16=2.5em */ 
p {font-size:0.875em;} /* 14px/16=0.875em */