一、字体
字体相关的样式
color
font-size
font-size相关单位
em相对于当前元素的font-size
rem相对于根元素的font-size
font-face可以直接将服务器中的字体提供给用户使用
问题：1.加载速度 2.版权 3.字体格式
@font-face{/*指定字体的名字,自己起名与下文font-family不通*/font-family:'xxx';/*url服务器中字体的路径*//*format字体格式，非必要，可以不用写*/src:url(../../xxx) format:truetype；}
font-family字体族（字体的格式）
font-family可以同时指定多个字体，字体间用，隔开字体生效时优先使用第一个，第一个无法生效再使用第二个，依此类推
可选值
指定字体的类别，浏览器会自动使用该类别下的字体
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
这三种一般写在最后
fantasy 虚幻字体
cuesive 草书字体
图标字体（iconfont）
网页中经常需要使用一些图标，可以直接将图标设置成字体然后通过font-face的形式对字体进行引入。这样就能以使用字体的形式来使用图标。
fontawesome使用步骤
1.下载
/
2.解压
3.将css和webfonts移动到项目下的同一个文件夹里面
4.将all.css引入到网页中
5.使用图标字体
1.直接通过类名来使用图标字体
<i class="fas 类名"></i>例<i class="fab fa-cat"></i>
2.通过伪元素来设置图标字体
1.找到要设置图标的元素，通过before或after选中
2.在content中设置字体编码
3.设置字体的样式
fab
content:'\编码'；font-family:"Font Awesome 5 Free";
fas
content:'\编码'；font-family:"Font Awesome 5 Free";font-weight:"900";
3.通过实体来使用图标字体
&#x图标的编码;
<span class="fas"></span>
阿里图标库
实体
<i class="iconfont ">&#x图标的编码</i>
类名
<i class="iconfont 类名"></i>
伪元素
content:'\编码'；font-family:'iconfont';font-size:100px;
字体的简写属性
font可以设置字体的所有属性
语法
font: 字体大小/行高 字体族
字体大小和字体族必须写且需要写在最后
行高省略不写那么行高就是默认值，会覆盖掉前文中line-height的值
所以建议line-height写在font之后
font-weight
字重，字体的加粗效果
可选值
normal（默认值）
bold
font-style
normal默认值）
italic 斜体
二、行高
行高文字占有的实际高度。可以通过line-height来设置（单行）
行高可以指定大小，也可以为行高设置一个整数。如果是一个整数的话那么行高将是字体的指定倍数字体框
字体存在的格子，设置font-size实际上是在设置字体框的高度
行高会在字体框中垂直居中
将行高和高度设置成一样的值可使文字垂直居中
行间距=行高-字体大小
三、文本的水平对齐和垂直对齐
text-align 文本的水平对齐
可选值
left
right
center
justify 两端对齐
vertical-align文本的垂直对齐
baseline 默认值，基线对齐子元素的基线和父元素的基线对齐
top
bottom
middle 居中对齐（子元素的中线和父元素中字母x的中线对其）
图片
将vertical-align属性设置为top或者bottom或者middle
以避免其默认与基线对齐导致与其他元素间产生有空隙
text-decoration设置文本修饰
可选值
none
underline下划线
line-through删除线
overline上划线
white-space设置网页如何处理空白
可选值
normal默认值
nowrap不换行
pre保留空白
将溢出的内容显示成省略号
.box1{width: 100px；white-space: nowrap；overflow: hidden；/*溢出的内容设置成省略号*/text-overflow: ellipsis；}
缺一不可
