字体的属性
color: red; 前景色，字体颜色
font-size: 30px; 字体大小
与font-size相关的单位
width: 2em; em 相当于当前元素的一个font-size
height: 3rem; rem相当于根元素html的一个font-size(移动端适配会大量使用）
字体族 font-family
font-family用于指定字体的类别，浏览器会自动使用该类别下的字体
font-family可以同时指定多个字体，多个字体间使用，隔开
字体生效优先使用第一个，第一个无法使用则使用第二个，以此类推
一般是在body中指定
可选值：
serif 衬线字体
san-serif 非衬线字体
monospace 等宽字体
font-family: "helvetica neue",tahoma,"hiragino sans gb",stheiti,"wenquanyi micro hei","\5FAE\8F6F\96C5\9ED1,\5B8B\4F53",sans-serif!important;
服务器字体下载
用户可以从服务器中下载字体
有可能出现的问题：
1、加载速度问题
2、版权的问题（比如微软雅黑）
3、字体格式（比如ttf）
4、字体文件可能很大
前提：将需要下载的字体放在项目中
@font-face {
font-family: 'myfont'; 指定字体的名称
src: url(../font/font/zooo.tft) format("truetype"); 字体的路径，format让浏览器去解析，非必要
}
p{
font-family: myfont;
}
图标字体 iconfont
在网页中经常需要使用一些小型的图标，可以通过图片来引入图标，但是图片本身比较大，并且非常不灵活，所以在使用图标时，可以将图标直接制作成字体，然后通过font-face的形式对字体进行引入，通过使用字体的形式来使用图标
font awesome
1、下载https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
2、解压，将zip包中的css和webfonts文件夹移动到项目中的同一级目录
3、将css中的all.css引入网页中
<link rel="stylesheet" href="../font/fa/css/all.css">
【1】通过类名来使用
fas和fab是免费的
<i class="fas fa-bell" style="font-size: 80px; color: red;"></i>
<i class="fab fa-accessible-icon" style="font-size: 20px;color: green;"></i>
【2】通过伪元素来使用
1、找到要设置图标的元素，通过before或after选中
2、在content中设置字体的编码
3、设置字体的样式，样式从引入的外部样式表中获取
.fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 400;
}
.fas {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
li::before {
content: '\f1b0';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
margin-right: 10px;
color: blue;
}
li::after {
content: '\f368';
font-family: 'Font Awesome 5 Brands';
font-weight: 400;
color: green;
margin-left: 10px;
}
<ul>
<li>锄禾日当午</li>
<li>汗滴禾下土</li>
<li>谁知盘中餐</li>
<li>粒粒皆辛苦</li>
</ul>
【3】通过实体来使用
&#x图标编码
<span class="fas"></span>
阿里图标字体
1、https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=19238
2、选择需要的图标字体加入购物车，添加至项目
3、将素材下载到本地，解压，将文件放入项目中
4、引入外部样式表
<link rel="stylesheet" href="../font/iconfont/iconfont.css">
5、demo_index.html中有使用说明，可以参考
出现的问题：版权问题
（1）通过类名来使用
<i class="iconfont icon-auto" style="font-size: 40px;"></i>
（2）通过伪元素来使用
p.hello::after{
content: '\e6ef';
font-family: "iconfont" !important;
font-size: 56px;
font-style: normal;
}
<p class="hello">hello</p>
（3）通过实体来使用
<span class="iconfont"></span>
行高
行高指的是文字占有的实际高度，可以通过line-height设置行高
行高可以直接指定大小（px em），也可以设置行高为整数
line-height:2; line-height = 2* font-size，若不设置默认line-height = 1.333* font-size
字体框
字体框是字体存在的格子，设置font-size就是在设置字体框的高度
行高会在字体框的上下平均分配
1、若line-height = height，则使单行文字在一个元素中垂直居中
2、行高可以用来设置文字间的距离，行间距 = line-height - font-size
3、line-height可以撑起高度，所以可以不用写height
简写属性
字体加粗 font-weight
font-weight: bold; bold 加粗
font-weight: normal; nomal 默认 不加粗
font-weight:100; 100-900九个级别（没用）
字体风格 font-style
font-style: normal; 正常
font-style: italic; 斜体
字体相关属性
font: 字体加粗 字体风格 字体大小/行高 字体族
不写会使用默认值
font: normal normal 50px/2 微软雅黑,'Times New Roman',Times,serif;
文本样式
文本水平对齐 text-align
left 左侧对齐
right 右对齐
center 居中对齐
justify 两端对齐
文本垂直对齐 vertical-align
baseline 默认值 基线对齐(子元素和父元素)
top 顶部对齐(子元素和父元素)
bottom 底部对齐(子元素和父元素)
middle 居中对齐(子元素和父元素)
通过指定值来调整位置
vertical-align: 100px;
备注：块元素中引入图片元素，下方会出现一段距离，这是图片的基线，需要将图片的垂直对齐属性设置成非baseline，才能解决这个问题
文本修饰 text-decoration
none 什么都没有
underline 下划线
line-through 删除线
overline 上划线
text-decoration: underline red dotted; 在ie浏览器中这样设置不生效
文本省略 white-space/text-overflow
white-space:设置网页如何处理空白
normal 默认 正常
nowrap 不换行
pre 保留空白
white-space: nowrap; 不换行
width: 200px;
overflow: hidden; 隐藏溢出的内容
text-overflow: ellipsis; 溢出内容显示省略号
