字體:
Css中有兩種不同類型的字體系列
- 通用字體系列-擁有相似外觀的字體系統(tǒng)組合(比如 "Serif" 或 "Monospace")
- 特定字體系列-具體的字體系列(比如 "Times" 或 "Courier")
5 種通用字體系列:
- Serif 字體
- Sans-serif 字體
- Monospace 字體
- Cursive 字體
- Fantasy 字體
各個屬性說明:
屬性 | 作用說明 | 備注 |
---|---|---|
font-family | 指定字體系列 | 代碼1* |
font-style | 指定字體風(fēng)格 | 說明1* |
font-variant | 字體變形 | 設(shè)定小型大寫字母(代碼2*) |
font-weight | 字體加粗 | 關(guān)鍵字 100 ~ 900 為字體指定了 9 級加粗度。數(shù)字 400 等價于 normal,而 700 等價于 bold。(代碼3*) |
font-size | 字體大小 | 可以取絕對值或相對值,如果沒有設(shè)定,默認(rèn)大小是16像素 (16px=1em)。(說明2*) |
代碼1:
body {font-family: sans-serif;}//指定通用字體
h1 {font-family: Georgia;}//可以指定特定字體
h1 {font-family: Georgia, serif;}//可以指定多個,前者優(yōu)先
p {font-family: Times, TimesNR, 'New Century Schoolbook',
Georgia, 'New York', serif;}//多詞語的情況下,可以使用引號
說明1:font-style屬性的三個值
- normal - 文本正常顯示
- italic - 文本斜體顯示
- oblique - 文本傾斜顯示
代碼2:
p {font-variant:small-caps;}
代碼3:
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
說明2:
- 可以直接使用像素來設(shè)置字體大小。
h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}
- 可以使用em 來設(shè)置字體大小,1em 等于當(dāng)前的字體尺寸。如果一個元素的 font-size 為 16 像素,那么對于該元素,1em 就等于 16 像素。在設(shè)置字體大小時,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 */
- 可以結(jié)合使用百分比和 EM
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}