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 / 倍数行距 / em / normal 默认行高 )- color: 文字颜色
( red / rgb(233,0,0) / #ff0022 ~ #f02, 推荐 16 进制)- text-decoration: 文字修饰
（ underline / overline / line-through / none）- text-align: 文本对齐方式
(left / center / right )- text-transform: 字母大小写
( lowercase / uppercase / capitalize )- text-indent: 文字缩进
( em / % / px / pt )- font : 复合属性
（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
设置字体大小
属性值：
number+px ： 固定值尺寸像素
number+ % ： 其百分比取值是基于父元素的字体的尺寸大小
p { font-size: 20px;}
p {font-size: 80%;}
2. font-family
设置文本字体
属性值：
- name: 字体名称，按优先顺序排列，以逗号隔开，如果字体名称包含空格，则应该使用双引号括起来。
示例如下 表示如果浏览器不支持 字体 Courier ，后面的是备选字体，如果提供的字体都不支持，浏览器会提供一种默认字体。
p {
font-family: Courier, "Courier New", monospace;
}
3. font-style
设置文本字体的样式。
属性值：
- normal : 默认值。 正常的字体。
- italic : 斜体。对于没有斜体变量的特殊字体，将使用 oblique
- oblique : 倾斜的字体。
p {
font-style: normal;
}
p {
font-style: italic;
}
p {
font-style: oblique;
}
4. font-weight
设置文本字体的粗细
属性值：
- normal : 默认值，正常的字体
- bold ： 粗体
- bolder ： 比 bold 粗
- lighter ： 比 normal 细
- 100-900 ： 定义由细到粗的字符。 400 等同于 normal ， 700 等同于 bold
p {
font-weight: normal;
}
p {
font-weight: bold;
}
p {
font-weight: 600;
}
5. color
设置文本字体的颜色
推荐使用 16 进制指定颜色。
属性值：
- name : 颜色英文名称指定
- rgb ： 指定颜色为 rgb 值
- 颜色 16 进制 ： 指定颜色为 16 进制
p {
color: red;
}
p {
color: rgb(100,20,200);
}
p {
color: #345678;
}
6. line-height ( / px / 数字 / em 等 )
设置文字字体的行高，即字体最底端与最顶端之间的距离
属性值：
- normal ： 默认值，默认行高
- number + px ： 指定行高为长度像素
- number ： 指定行高为字体大小的倍数
- number + em ： 指几个文字的行高
p {
line-height: normal;
}
p {
line-height: 24px;
}
p {
line-height: 1.5;
}
p {
line-height: 2 em; （连两个文字的行高 ， 等于 2 ）
}
7. text-decoration
设置文本字体的修饰 ( none / line-through / overline /underline )
属性值：
- normal ： 默认值，没有修饰
- underline ： 下划线
- line-through ： 贯穿线
- overline ： 上划线
p { text-decoration: underline;}
p { text-decoration: overline;}
p { text-decoration: line-through;}
8. text-align
设置文本字体的对齐方式 ( left / center / right )
属性值
- left ：默认值，左对齐
- right
- center
p { text-align: righht;}
p { text-align: center;}
9. text-transform
设置文本字体的大小写 （none / lowercase / uppercase / capitalize ）
属性值：
- none ： 默认值（无转换发生）
- capitalize ： 将每个单词的首字母转换成大写字母
- uppercase ： 转化成大写
- lowercase ： 转换成小写
p { text-transform: capitalize;}
p { text-transform: upppercase;}
p { text-transform: lowercase;}
10. text-indent
设置文本字体的首行缩进 (px / em / % / pt 等)
属性值
- number + px ：首行缩进 number 像素
- number + em ： 首行缩进 number 字符
p { text-indent: 24px;}
p { text-indent: 2em;} // 缩进 2 个字符
11. font 复合属性
font：font-style font-variant font-weight font-size/line-height font-family;
注意：
- 属性值的位置顺序
- 除了 font-size 和 font-family 外，其他任何一个属性至都可以省略
- font-variant 文本修饰，normal / small-caps
small-caps 让大写字母变得比同行的小一号，单词有大写的不转换，单词全是小写全部转换成大写
<style>
strong {
font: italic small-caps bolder 18px/1.5 宋体
}
</style>
<strong>人生苦难重重</strong>
