字体样式

字体样式

字体的样式在我们写样式时可以说时非常常用的，所以在这里总结下

---

字体大小font-size

font-size作用：设置字体的大小

常用单位是px和%。如果使用%，其大小是基于父对象中字体的尺寸大小。

---

文本字体font-family

font-family作用：设置文本字体（如黑体，宋体等）

属性值：字体名称，按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应使用引号括起。

p { font-family: Courier, "Courier New", monospace; }

---

字体样式font-style

font-style作用：设置文本样式（如斜体）

属性值：

1. normal：默认值，正常字体
2. italic：斜体，对于没有斜体的文本，将应用oblique
3. oblique：倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字

---

字体粗细font-weight

font-weight作用：设置文本字体的粗细

属性值：

1. normal：默认值，正常字体
2. bold：粗体
3. bolder：比bold更粗
4. lighter：比normal更细
5. [100-999]：自定义粗细，400等于normal，700等于bold

---

颜色color

color作用：设置字体的颜色（准确的说是设置前景色）

属性值：参考颜色表示

---

行高line-height

line-height作用：设置文本行高，即字体最低端，与字体内部顶端的距离

属性值：

1. normal：默认值，默认行高
2. [number+px]：指定行高为number像素
3. [number]：指定行高为字体大小的number倍

p { line-height: normal; }
p { line-height: 24px; }
p { line-height: 1.5; }

---

文本修饰线text-decoration

text-decoration作用：设置文本字体的修饰（例如下划线等）

属性值：

1. normal：默认值，无修饰
2. underline：下划线
3. line-through：贯穿线
4. overline：上划线

---

对齐方式text-align

text-align作用：设置文本对齐方式

属性值：

1. left：默认值，左对齐
2. center：居中对齐
3. right：右对齐

---

首行缩进text-indent

text-indent作用：设置文本字体的首行缩进。

属性值：

1. [number+px]：首行缩进number像素
2. [number+em]：首行缩进number字符

---

字体变化font-variant

font-variant作用：设置或检索对象中的文本是否为小型的大写字母。

属性值：

1. normal：正常的字体
2. small-caps：小型的大写字母字体，若该单词全部为小写，则转为大写，且字号变小。

---

复合属性font

即把多个属性写道一行里，比较简洁，但容易记错，且可读性差。格式如下

font:font-style font-variant font-weight font-size/line-height font-family;

注意：

1. 属性的顺序不可颠倒
2. 除了font-size和font-family之外，其它任何一个属性值都可以省略

---

字体阴影text-shadow

text-shadow：添加文本阴影

用法：text-shadow：水平偏移 垂直偏移 模糊 颜色，例如

text-shadow: 5px 5px 2px #fff

---

换行方式word-wrap

word-wrap：设置文本换行的方式

属性值：

1. normal：默认值，在标点符号/空格处换行，不会中断单词。
2. break-word：强制中断过长的单词进行换行，注意：不会加换行符。

---

文本溢出text-overflow

text-overflow：设置对溢出文本的处理方式，需要和overflow: hidden;white-space: nowrap配合使用

属性值：

1. clip：默认值，隐藏溢出部分
2. ellipsis：使用省略号代表溢出部分

div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}