CSS样式（字体）

字体样式包括

1. 字体粗细 font weight
2. 字体系列、样式 family and style
3. 字体缩写 font shorthand
4. 文字排列 text alignment
5. 其他效果
6. 行间距
7. 字间距

字体颜色

设置字体为红色

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 文本中单词的间距

更多文字样式