CSS(五) |
一、字体族 font-family
1、可选值
- serif 衬线字体
- sans-serif非衬线字体
- monospace 等宽字体 确保每个字体宽度是一致的
2、用于指定字体类别,浏览器会自动使用该类别下的字体,可以同时指定多个字体,使用“,”隔开,优先使用第一个
3、@font-face可以将服务器中气体直接提供给用户使用
存在的问题:
- 加载速度慢
- 字体切换会出现闪烁
- 版权问题
二、图标字体 iconfont
1、将图标直接设置为字体,通过font-face 的形式对字体进行引入
2、使用步骤:
- 下载 http://fontawesome.com/
- 解压
- 将css和webfonts 移动到项目中,必须在同级目录
- 将all.css引入到网页中
- 使用图标字体:直接通过类名来使用图标字母 < i class=‘fas fa-bell’ >
3、示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./fa/css/all.css">
<style>
li{
list-style: none;
}
li::before{
/*
通过伪元素来设置图标字体
1.找到要设置图标的元素通过before或after选中
2.在content中设置字体的编码
3.设置字体的样式
fab
font-family: 'Font Awesome 5 Brands';
fas
font-family: 'Font Awesome 5 Free';
font-weight: 900;
*/
content: '\f1b0';
/* font-family: 'Font Awesome 5 Brands'; */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: blue;
margin-right: 10px;
}
</style>
</head>
<body>
<!-- <i class="fas fa-cat"></i> -->
<ul>
<li>锄禾日当午</li>
<li>汗滴禾下土</li>
<li>谁知盘中餐</li>
<li>粒粒皆辛苦</li>
</ul>
<!--
通过实体来使用图标字体:
&#x图标的编码;
-->
<span class="fas"></span>
</body>
</html>