字体相关样式/ fontawesome库/阿里iconfont库的使用方法_font awesome 5 pro

1.字体相关样式：

1.1 color 用来设置字体颜色
1.2 font-size 字体的大小， 和font-size相关的单位
em 相当于当前元素的一个font-size
rem 相对于根元素的一个font-size
1.3行高：
行高指的是文字占有的实际高度， 可以通过line-height来设置行高
行高可以直接指定一个大小（px em） ，也可以直接为行高设置一个整数， 如果是一个整数的话，行高将会是字体的指定的倍数。

设置行高就可以不用设置height,因为行高会把内容撑开，line-height指的是单行的行高。多行的情况如下图所示，证实了ine-height指的是单行的行高。


字体框：字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度，font-size默认是16px。
行高经常还用来设置文字的行间距， 行间距 = 行高 - 字体大小（字体框），行高会在字体框的上下平均分配（默认情况下line-height: 1.33;行高是字体框的1.33倍）
1.4 font-family 字体族（字体的格式）
可选值：serif 衬线字体/ sans-serif 非衬线字体/ monospace 等宽字体，指定字体的类别，浏览器会自动使用该类别下的字体，具体看用户计算机安装了哪些可用的字体。
font-family 可以同时指定多个字体，多个字体间使用,隔开，字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推
例如 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif（最后一个是类别，起到一个兜底的作用）（给用户的建议，不牵扯到版权）
1.5让用户使用服务器的字体
在style标签中使用@font-face声明：

去使用声明的字体

问题：
1.加载速度
2.版权（用户通过服务器地址下载的牵扯到版权问题）
3.字体格式（ttf字体文件格式，可以提供多种格式，优先支持的优先使用）

2. 图标字体（iconfont）

• 在网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片大小本身比较大，并且非常的不灵活，并且图片在放大的时候会发生失真的现象。所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入， 这样我们就可以通过使用字体的形式来使用图标，并且在图标放大时不会发生失真现象。
  fontawesome库，1000多个图标

fontawesome 使用步骤
1.下载 https://fontawesome.com/
2.解压
3.将css和webfonts移动到项目中,注意css和webfonts必须在同一级目录下，字体文件在webfonts中
4.将css中的all.css通过link引入到网页中（注意在vscode复制文件夹的时候注意路径，文件夹的重叠问题，可从目录中查看绝对路径）
5.使用图标字体
使用方式1：
- 直接通过类名来使用图标字体
class=“fas fa-bell”
class=“fab fa-accessible-icon”
fas，fab是为了引入字体文件（两个免费使用的类），fa-bell说明是哪个字体。

出处：

使用方式2:
通过伪元素来设置图标字体

1.找到要设置图标的元素通过before或after选中
2.在content中设置字体的编码 (\编码)，编码可在图标库的文档里查询。
3.设置字体的样式（两者其一，出现乱码情况换另一种）
fab
font-family: ‘Font Awesome 5 Brands’;

fas
font-family: ‘Font Awesome 5 Free’;
font-weight: 900;

使用方式3：

阿里iconfont库，800多万
使用方法：使用账号登陆，选择图标加入购物车，保存在一个自定义名称的项目中，然后在项目管理中将项目下载，导入到vscode中，将文件夹中的iconfont.css通过link引入到网页中。
使用方式1，2，3

iconfont类有具体的样式，如果需要重置样式，可以使用元素.iconfont提高选择器的优先级。