CSS样式学习笔记之字体 文本相关属性
1、字体大小
▍属性名：font-size
▍语法：
div {
font-size:40px;
}▍注意点:
1. Chrome 浏览器支持的最小文字为 12px ，默认的文字大小为 16px ，并且 0px 会自动消失。
2. 不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小。
3. 通常以给 body 设置 font-size 属性，这样 body 中的其他元素就都可以继承了。
2、字体族
▍属性名：font-family
▍语法：
div {
font-family:"STCaiyun","Microsoft YaHei",sans-serif；
}▍注意点：
1. 使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里去寻找。
2. 如果字体名包含空格，必须使用引号包裹起来。
3 可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通常在最后写上 serif(衬线字体)或sans-serif(非衬线字体)
4. windows 系统中，默认的字体就是微软雅黑。
3、字体风格
▍属性名：font-style
▍常用值：
1. normal：正常:(默认值)
2. italic：斜体（使用字体自带的斜体效果）
3. oblique：斜体（强制倾斜产生的斜体效果）
实现斜体时，更推荐使用 italic。
▍语法：
div {
font-style: italic;
}4、字体粗细
▍属性名：font-weight
▍常用值：
(1)关键词:
1. lighter ：细
2. normal：正常
3. bold：粗
4. bolder：很粗（多数字体不支持）
(2)数值：
1. 100~1000 且无单位，数值越大，字体越粗（或一样粗，具体得看字体设计时的精确程度）。
2. 100~300等同于lighter，400~500等同于normal，600及以上等同于 bold。
▍语法：
div {
font-weight:bold;
}
div {
font-weight:600;
}5、字体复合属性
▍属性名：font，可以把上述字体样式合并成一个属性。
▍编写规则：
1. 字体大小、字体族必须都写上。
2. 字体族必须是最后一位、字体大小必须是倒数第二位。
3. 各个属性间用空格隔开。
▍实际开发中更推荐复合写法，但这也不是绝对的，比如只想设置字体大小，那就直接用 font-size 属性。
6、文本颜色
▍属性名：color
▍可选值：
1. 颜色名
2. rgb 或 rgba
3. hex 或 hexa（十六进制）
4. hsl 或 hsla
▍开发中常用的是：rgb/rgba 或 hex/hexa（十六进制）
▍举例：
div {
color: rgb(112,45,78);
}7、文本间距
▍字母间距：letter-spacing
▍单词间距：word-spacing（通过空格识别词）
▍属性值为像素（px），正值让间距增大，负值让间距缩小。
8、文本修饰
▍属性名：text-decoration
▍可选值：
1. none：无装饰线(常用)
2. underline：下划线(常用)
3. overline：上划线
4. line-through：删除线
可搭配如下值使用：
1. dotted：虚线
2. wavy：波浪线
3. 也可以指定颜色
▍举例：
a {
text-decoration：none;
}9、文本缩进
▍属性名：text-indent
▍属性值：css中的长度单位，例如：px
▍举例：
div {
text-indent: 40px;
}10、文本对齐_水平
▍属性名：text-align
▍属性值：left（左对齐默认值）/center（居中对齐）/right（右对齐）
div {
text-align: center;
}11、细说font-size
1. 由于字体设计原因，文字最终呈现的大小，并不一定与 font-size 的值一致，可能大，也可能小。
例如：font-size 设为 40px，最终呈现的文字，可能比 40px 大，也可能比 40px 小。
2. 通常情况下，文字相对字体设计框，并不是垂直居中的，通常都 靠下 一些。
12、文本行高
▍属性名：line-height
▍可选值：
1. normal：由浏览器根据文字大小决定的一个默认值。
2. 像素（px）。
3. 数字：参考自身 font-size 的倍数（很常用）
4. 百分比：参考自身 font-size 的百分比。
▍备注：由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响观感。
▍举例：
div {
line-height：60px;
line-height：1.5;
line-height：150%;
}▍行高注意事项：
1. line-height 过小会怎样?-- 文字产生重叠，且最小值是0，不能为负数。
2. line-height 是可以继承的，且为了能更好的呈现文字，最好写数值。
3. line-height 和 height 是什么关系?
设置了 height ，那么高度就是 height 的值。
不设置 height 的时候，会根据 line-height 计算高度。
▍应用场景：
1. 对于多行文字：控制行与行之间的距离。
2. 对于单行文字：让 height 等于 line-height，可以实现文字垂直居中。
▍备注：由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文
字，不会太影响观感。
13、文本对齐_垂直
▍顶部：无需任何属性，在垂直方向上，默认就是顶部对齐。
▍居中：对于单行文字，让 height=line-height 即可。
▍底部：对于单行文字，目前一个临时的方式：让 line-height = (height×2) - font-size - x。
▍备注：x是根据字体族，动态决定的一个值。
14、常用文本属性
▍属性名：vertical-align
▍作用：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。
▍常用值：
1. baseline(默认值)：使元素的基线与父元素的基线对齐。
2. top：使元素的顶部与其所在行的顶部对齐。
3. middle ：使元素的中部与父元素的基线加上父元素字母×的一半对齐。
4. bottom：使元素的底部与其所在行的底部对齐。
▍特别注意： vertical-align 不能控制块元素。
