字体样式包括
- 字体粗细 font weight
- 字体系列、样式 family and style
- 字体缩写 font shorthand
- 文字排列 text alignment
- 其他效果
- 行间距
- 字间距
字体颜色
设置字体为红色
p {
color:red;
}
字体种类
p{
font-family:arial
}
字体大小
单位： px、 em、 rem
- 1px = 一个像素大小
- 1em = 当前元素的父元素上设置的字体大小（严格来说，是父元素中大写字母M的宽度）
- 1rem = HTML根元素的字体大小（version >= IE9)
font-size:'12px'；
font-size:2.6rem;
font-size:3/10rem;
字体样式，字体粗细，文本转换和文本装饰
font-style 用来打开或者关闭斜体
| 类型 | 说明 |
|---|---|
| normal | 将文本设置为普通字体 (将存在的斜体关闭) |
| italic | 如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。 |
| oblique | 将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。 |
如果你的字体倾斜角度有限制，而不能满足你的话，你也可以利用
transform变形来旋转显示！。
font-weight 用来设置文本的粗体大小，这里有很多值可选，但是事实上你经常只会用到normal、bold
| 类型 | 说明 |
|---|---|
| normal | 普通字体 |
| bold | 加粗字体 |
| lighter | 当前元素的粗体设置为比其父元素更细（100-900） |
| bolder | 当前元素的粗体设置为比其父元素更粗（100-900） |
text-transform 允许你设置你需要转换的字体
| 类型 | 说明 |
|---|---|
| none | 放置任何转型 |
| uppercase | 把所有文字转换为大写 |
| lowercase | 所有文字转换为小写 |
| capitalize | 所有单词，首字母大写 |
| full-width | 所有字型转换为固定宽度的正方形、类似于等宽字体 |
text-decoration
| 类型 | 说明 |
|---|---|
| none | 取消任何已经存在的文本装饰 |
| underline | 文本下划线 |
| overline | 文本上划线 |
| line-through | 穿过文本的线 |
值得注意 text-decoration 一次接受多个值，你可以添加多个装饰器
| 组成部分 | 组成部分 | 组成部分 |
|---|---|---|
| text-decoration-line | text-decoration-style | text-decoration-color |
| 默认值：none | 默认值：solid | 默认值：currentcolor |
| 设置元素中的文本修饰类型 | 设置线的样式，见下方 | 色彩设置 |
text-decoartion-style的属性值
- solid 实线
- double 双线
- dotted 点状线
- dashed 横点状线
- wavy 曲线
字体阴影
text-shadow: 4px 4px 5px red;
参数有一下四个组成部分
| 组成部分 | 组成部分 | 组成部分 | 组成部分 |
|---|---|---|---|
| 阴影与原始文本水平偏移 | 阴影与原始文本垂直偏移 | 模糊半径 | 阴影基础色彩，默认Black |
你还可以设置逗号分隔，设置多个阴影
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 设置文本对齐位置
- left 左对齐
- right 右对齐
- center 居中文字
- justify 文本展开，改变单词之间的差距，使得所有的文本行宽度相同，注意，他会打破文本。
字体行高
line-height 设置文本的行高，可以接受大多数单位，不过你也可以设置一个没有单位的值，作为乘数。例如1.5代表1.5倍行高。
字体间距 单词间距
letter-spacing 文本中字母的间距
word-spacing 文本中单词的间距
