目录
一、字体
字体相关的样式
color 用来设置字体颜色
font-size 用来设置字体的大小
和font-size相关的单位
em 相对于当前元素的一个font-size
rem 相对于根元素的一个font-size
font-family 字体族（字体的格式）
可选值：
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
指定字体的类别，浏览器会自动使用该类别下的字体
【注】font-family 可以同时指定多个字体，多个字体间使用,隔开
字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推
font-face
可以将服务器中的字体直接提供给用户去使用
存在的问题:
1.加载速度
2.版权
3.字体格式问题
@font-face {
/* 指定字体的名字 */
font-family:'随便起你需要的字体名字' ;
/* 服务器中字体的路径 */
src: url() format("truetype");
}
二、图标字体
在网页中经常需要使用一些图标，可以通过图片来引入图标
但是图片本身会比较大，并且非常的不灵活
所以在使用图标时，我们还可以将图标直接设置为字体
然后通过font-face的形式来对字体进行引入
这样我们就可以通过使用字体的形式来使用图标
fontawesome 使用步骤：
下载
解压
将css和webfonts移动到项目中
将all.css引入到网页中
使用图标字体
直接通过类名来使用图标字体
有如下俩种情况
<i class="fas fa-bell-slash"></i>
<i class="fab fa-accessible-icon"></i>
通过伪元素来设置图标字体
找到要设置图标的元素通过before或after旋转
在content中设置字体的编码
例：
/*引入图标字体库*/
<link rel="stylesheet" href="./fontawesome/css/all.css">
li::before{
content: '\f1b0';
/* font-family: 'Font Awesome 5 Brands'; */ （fab）
font-family: 'Font Awesome 5 Free'; （fas）
font-weight: 900;
color: skyblue;
font-size: 5px;
margin-right: 10px;
}
三、阿里的图标字体库
/*引入在阿里图标字体库下载的图标*/
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
.iconfont{
font-size: 200px;
}
p::before{
content: '\e61e';
font-family: 'iconfont';
font-size: 200px;
}
</style>
</head>
<body>
<i class="iconfont"></i>
<i class="iconfont icon-kehuishou-buliaolei"></i>
<p>Hello</p>
</body>
图标字体库fontawesome可以去百度下载！！！！
1353
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
