2020-10-3 , 2020-10-23
- font-size : 字號
( px / % )- font-family : 字體
(字體名稱)- font-style: 樣式
（italic / oblique / normal ）- font-weight: 加粗
( normal / bold / bolder / lighter / 100-900 ){ nomal ~ 400 , bold ~ 700 }- line-height: 行高
( px / 倍數(shù)行距 / em / normal 默認(rèn)行高 )- color: 文字顏色
( red / rgb(233,0,0) / #ff0022 ~ #f02, 推薦 16 進(jìn)制)- text-decoration: 文字修飾
（ underline / overline / line-through / none）- text-align: 文本對齊方式
(left / center / right )- text-transform: 字母大小寫
( lowercase / uppercase / capitalize )- text-indent: 文字縮進(jìn)
( em / % / px / pt )- font : 復(fù)合屬性
（font-style font-variant font-weight font-size/line-height font-family）
font-variant:small-caps / normal
font 屬性順序不能變磺芭， font-size 攘轩， font-family 屬性不能省略
1. font-size
設(shè)置字體大小
屬性值：
number+px ： 固定值尺寸像素
number+ % ： 其百分比取值是基于父元素的字體的尺寸大小
p { font-size: 20px;}
p {font-size: 80%;}
2. font-family
設(shè)置文本字體
屬性值：
- name: 字體名稱壮虫，按優(yōu)先順序排列，以逗號隔開晃痴，如果字體名稱包含空格花竞，則應(yīng)該使用雙引號括起來侮攀。
示例如下 表示如果瀏覽器不支持 字體 Courier 倦沧，后面的是備選字體，如果提供的字體都不支持墩弯，瀏覽器會提供一種默認(rèn)字體吩跋。
p {
font-family: Courier, "Courier New", monospace;
}
3. font-style
設(shè)置文本字體的樣式。
屬性值：
- normal : 默認(rèn)值渔工。 正常的字體锌钮。
- italic : 斜體。對于沒有斜體變量的特殊字體引矩，將使用 oblique
- oblique : 傾斜的字體梁丘。
p {
font-style: normal;
}
p {
font-style: italic;
}
p {
font-style: oblique;
}
4. font-weight
設(shè)置文本字體的粗細(xì)
屬性值：
- normal : 默認(rèn)值侵浸，正常的字體
- bold ： 粗體
- bolder ： 比 bold 粗
- lighter ： 比 normal 細(xì)
- 100-900 ： 定義由細(xì)到粗的字符。 400 等同于 normal 氛谜， 700 等同于 bold
p {
font-weight: normal;
}
p {
font-weight: bold;
}
p {
font-weight: 600;
}
5. color
設(shè)置文本字體的顏色
推薦使用 16 進(jìn)制指定顏色掏觉。
屬性值：
- name : 顏色英文名稱指定
- rgb ： 指定顏色為 rgb 值
- 顏色 16 進(jìn)制 ： 指定顏色為 16 進(jìn)制
p {
color: red;
}
p {
color: rgb(100,20,200);
}
p {
color: #345678;
}
6. line-height ( / px / 數(shù)字 / em 等 )
設(shè)置文字字體的行高，即字體最底端與最頂端之間的距離
屬性值：
- normal ： 默認(rèn)值值漫，默認(rèn)行高
- number + px ： 指定行高為長度像素
- number ： 指定行高為字體大小的倍數(shù)
- number + em ： 指幾個文字的行高
p {
line-height: normal;
}
p {
line-height: 24px;
}
p {
line-height: 1.5;
}
p {
line-height: 2 em; （連兩個文字的行高 澳腹， 等于 2 ）
}
7. text-decoration
設(shè)置文本字體的修飾 ( none / line-through / overline /underline )
屬性值：
- normal ： 默認(rèn)值，沒有修飾
- underline ： 下劃線
- line-through ： 貫穿線
- overline ： 上劃線
p { text-decoration: underline;}
p { text-decoration: overline;}
p { text-decoration: line-through;}
8. text-align
設(shè)置文本字體的對齊方式 ( left / center / right )
屬性值
- left ：默認(rèn)值惭嚣，左對齊
- right
- center
p { text-align: righht;}
p { text-align: center;}
9. text-transform
設(shè)置文本字體的大小寫 （none / lowercase / uppercase / capitalize ）
屬性值：
- none ： 默認(rèn)值（無轉(zhuǎn)換發(fā)生）
- capitalize ： 將每個單詞的首字母轉(zhuǎn)換成大寫字母
- uppercase ： 轉(zhuǎn)化成大寫
- lowercase ： 轉(zhuǎn)換成小寫
p { text-transform: capitalize;}
p { text-transform: upppercase;}
p { text-transform: lowercase;}
10. text-indent
設(shè)置文本字體的首行縮進(jìn) (px / em / % / pt 等)
屬性值
- number + px ：首行縮進(jìn) number 像素
- number + em ： 首行縮進(jìn) number 字符
p { text-indent: 24px;}
p { text-indent: 2em;} // 縮進(jìn) 2 個字符
11. font 復(fù)合屬性
font：font-style font-variant font-weight font-size/line-height font-family;
注意：
- 屬性值的位置順序
- 除了 font-size 和 font-family 外遵湖，其他任何一個屬性至都可以省略
- font-variant 文本修飾悔政，normal / small-caps
small-caps 讓大寫字母變得比同行的小一號晚吞，單詞有大寫的不轉(zhuǎn)換，單詞全是小寫全部轉(zhuǎn)換成大寫
<style>
strong {
font: italic small-caps bolder 18px/1.5 宋體
}
</style>
<strong>人生苦難重重</strong>
