[Back To Basic] css - 字形(Font)

Serif和Sans-serif的差別

字形以系列可分為兩種

• 一般系列(generic family)
• 數個“字形系列”擁有相似的外觀(像是都有襯線、等寬的特徵)
• 襯線(Serif)
• 非襯線(Sans-Serif)
• 等寬(Monospace)
• 字形系列(font family)
• 專指特定的字形
• Times New Roman(Serif的一種)
• Georgia(Serif的一種)
• Arial(Sans-serif的一種)

*.在電腦螢幕上，襯線類型的字體(Serif)，是比較容易閱讀的

在css中設定字形

1. 字形設定上，建議設定n種字形，當瀏覽器不支援時還可以有其他備案。
2. 第一個字形是最想使用的，依序排列，建議在最後放上一般系列(generic family)的字形讓瀏覽器去挑選最相似的方案
3. 如果字形的名稱的單字超過一個，務必加上雙引號(“)

e.g. font-family: "Times New Roman", Times, serif;

斜體設定font-style

兩個都是斜體

1. italic
2. oblique (支援程度較差)

字體大小font-size

在設定字體大小前，HTML的標籤一定要正常使用，該是標題的就是用<h1>-<h6>，該是段落文字就是用<p>，不要覺得字體大小改變和標籤無關，就不遵守這個準則。

可設定為

1. 絕對大小(一樣可以透過瀏覽器的縮放功能(Zoom)來調整字體大小)
2. 相對大小(w3c建議使用，但是在比較舊的ie版本上會有一點問題，大會更大，小會更小)
3. 若無設定，<p>的預設字體大小: 16px=1em

總結以上作法，

在body設定字體大小如下

body {

  font-size: 100%;

}

再使用相對大小就可以支援所有瀏覽器，也符合w3c的建議了

• 字體重量font- weight，可以設定字體的粗細來表示字體的”重量”