字體樣式包括
- 字體粗細 font weight
- 字體系列、樣式 family and style
- 字體縮寫 font shorthand
- 文字排列 text alignment
- 其他效果
- 行間距
- 字間距
字體顏色
設(shè)置字體為紅色
p {
color:red;
}
字體種類
p{
font-family:arial
}
字體大小
單位： px、 em、 rem
- 1px = 一個像素大小
- 1em = 當(dāng)前元素的父元素上設(shè)置的字體大?。▏?yán)格來說，是父元素中大寫字母M的寬度）
- 1rem = HTML根元素的字體大小（version >= IE9)
font-size:'12px'；
font-size:2.6rem;
font-size:3/10rem;
字體樣式，字體粗細，文本轉(zhuǎn)換和文本裝飾
font-style 用來打開或者關(guān)閉斜體
| 類型 | 說明 |
|---|---|
| normal | 將文本設(shè)置為普通字體 (將存在的斜體關(guān)閉) |
| italic | 如果當(dāng)前字體的斜體版本可用，那么文本設(shè)置為斜體版本；如果不可用，那么會利用 oblique 狀態(tài)來模擬 italics。 |
| oblique | 將文本設(shè)置為斜體字體的模擬版本，也就是將普通文本傾斜的樣式應(yīng)用到文本中。 |
如果你的字體傾斜角度有限制，而不能滿足你的話，你也可以利用
transform變形來旋轉(zhuǎn)顯示！。
font-weight 用來設(shè)置文本的粗體大小，這里有很多值可選，但是事實上你經(jīng)常只會用到normal、bold
| 類型 | 說明 |
|---|---|
| normal | 普通字體 |
| bold | 加粗字體 |
| lighter | 當(dāng)前元素的粗體設(shè)置為比其父元素更細（100-900） |
| bolder | 當(dāng)前元素的粗體設(shè)置為比其父元素更粗（100-900） |
text-transform 允許你設(shè)置你需要轉(zhuǎn)換的字體
| 類型 | 說明 |
|---|---|
| none | 放置任何轉(zhuǎn)型 |
| uppercase | 把所有文字轉(zhuǎn)換為大寫 |
| lowercase | 所有文字轉(zhuǎn)換為小寫 |
| capitalize | 所有單詞，首字母大寫 |
| full-width | 所有字型轉(zhuǎn)換為固定寬度的正方形、類似于等寬字體 |
text-decoration
| 類型 | 說明 |
|---|---|
| none | 取消任何已經(jīng)存在的文本裝飾 |
| underline | 文本下劃線 |
| overline | 文本上劃線 |
| line-through | 穿過文本的線 |
值得注意 text-decoration 一次接受多個值，你可以添加多個裝飾器
| 組成部分 | 組成部分 | 組成部分 |
|---|---|---|
| text-decoration-line | text-decoration-style | text-decoration-color |
| 默認(rèn)值：none | 默認(rèn)值：solid | 默認(rèn)值：currentcolor |
| 設(shè)置元素中的文本修飾類型 | 設(shè)置線的樣式，見下方 | 色彩設(shè)置 |
text-decoartion-style的屬性值
- solid 實線
- double 雙線
- dotted 點狀線
- dashed 橫點狀線
- wavy 曲線
字體陰影
text-shadow: 4px 4px 5px red;
參數(shù)有一下四個組成部分
| 組成部分 | 組成部分 | 組成部分 | 組成部分 |
|---|---|---|---|
| 陰影與原始文本水平偏移 | 陰影與原始文本垂直偏移 | 模糊半徑 | 陰影基礎(chǔ)色彩，默認(rèn)Black |
你還可以設(shè)置逗號分隔，設(shè)置多個陰影
text-shadow: -1px -1px 1px #aaa,
0px 4px 1px rgba(0,0,0,0.5),
4px 4px 5px rgba(0,0,0,0.7),
0px 0px 7px rgba(0,0,0,0.4);
文本布局
text-align 設(shè)置文本對齊位置
- left 左對齊
- right 右對齊
- center 居中文字
- justify 文本展開，改變單詞之間的差距，使得所有的文本行寬度相同，注意，他會打破文本。
字體行高
line-height 設(shè)置文本的行高，可以接受大多數(shù)單位，不過你也可以設(shè)置一個沒有單位的值，作為乘數(shù)。例如1.5代表1.5倍行高。
字體間距 單詞間距
letter-spacing 文本中字母的間距
word-spacing 文本中單詞的間距
