font屬性繼承屬性。設定文字斜體、字型、大小、粗細、行高等相關6個屬性值(font-style、font-variant、font-weight、font-size、line-height、font-family)。各屬性值不可任意排列，排列順序和方式為font-style font-variant font-weight font-size/line-height font-family( 為半形空白)。font-size、font-family以外的屬性值可以省略，被設定為各屬性的初期值。
| 屬性 | 適用元素 | 屬性值 | 說明 |
|---|---|---|---|
| font | all | font-style font-variant font-weight font-size line-height font-family |
→ 設定斜體(oblique、italic)文字 → 設定小體大寫(small capital)文字 → 設定文字的粗細 → 設定文字的大小 → 設定行高 → 設定文字的字型 |
.font {font : italic small-caps bold 110%/1.2 'Arial'; }
font-family屬性繼承屬性，設定文字的字型。能夠設定複數個字型，以(,)區隔。字型名稱如果含空白，則必須加上單引號('')或雙引號("")。
| 屬性 | 適用元素 | 屬性值 | 說明 |
|---|---|---|---|
| font-family | all | font family inherit |
→ Arial、Arial Black、Comic Sans MS、細明體等 → sans-serif、serif、monospace、fantasy、cursive → 強制繼承上層元素的屬性值 |
h3.sample {
color: white;
font-family : Arial,'MS Gothic',sans-serif ;
}
font-size屬性繼承屬性，設定文字的大小。
| 屬性 | 適用元素 | 屬性值 | 說明 |
|---|---|---|---|
| font-size | all | 長度 百分比 xx-small x-small small medium(default) large x-large xx-large larger smaller inherit |
→ em、px等長度(相對、絕對單位) → 相對的百分比大小(相對單位) → 超極小(絕對單位) → 極小(絕對單位) → 小(絕對單位) → 標準(絕對單位) → 大(絕對單位) → 極大(絕對單位) → 超極大(絕對單位) → 較大(相對單位) → 較小(相對單位) → 強制繼承上層元素的屬性值 |
.medium { font-size : medium ;display:inline ; }
.xx-small { font-size : xx-small ;display:inline ; }
.small { font-size : small ;display:inline ; }
.large { font-size : large ;display:inline ; }
.x-large { font-size : x-large ;display:inline ; }
.xx-large { font-size : xx-large ;display:inline ; }
.larger { font-size : larger ;display:inline ; }
.smaller { font-size : smaller ;display:inline ; }
font-style屬性繼承屬性，設定文字的斜體。
| 屬性 | 適用元素 | 屬性值 | 說明 |
|---|---|---|---|
| font-style | all | normal (default) italic oblique inherit |
→ 標準 → italic字體 → 斜體字體(Netscape不對應) → 強制繼承上層元素的屬性值 |
.normal { font-style : normal ; }
.italic { font-style : italic ; }
.oblique { font-style : oblique; }
font-variant屬性繼承屬性，設定英文字是否變成小體大寫(small capital)。
| 屬性 | 適用元素 | 屬性值 | 說明 |
|---|---|---|---|
| font-variant | all | normal (default) small-caps inherit |
→ 標準 → 小體大寫(small capital) → 強制繼承上層元素的屬性值 |
.normal { font-variant : normal ; }
.caps { font-variant : small-caps ; }
font-weight屬性繼承屬性，設定文字的粗細。
| 屬性 | 適用元素 | 屬性值 | 說明 |
|---|---|---|---|
| font-weight | all | normal (default) bold bolder lighter 100-900 inherit |
→ 標準(相當400) → 粗體(相當700) → 較粗體(相當+100) → 較細體(相當-100) →100(最細),200,300,400(標準),500,600,700,800,900(最粗) → 強制繼承上層元素的屬性值 |
.w100 { font-weight: 100 ;display:inline; }
.w200 { font-weight: 100 ;display:inline; }
.w300 { font-weight: 100 ;display:inline; }
.w400 { font-weight: 100 ;display:inline; }
.w500 { font-weight: 100 ;display:inline; }
.w600 { font-weight: 100 ;display:inline; }
.w700 { font-weight: 100 ;display:inline; }
.w800 { font-weight: 100 ;display:inline; }
.w900 { font-weight: 100 ;display:inline; }