css中的字体

字体相关的样式

font-face 自定义字体

font-face 可以将服务器中的字体直接提供给用户去使用

问题： 1.加载速度 2.版权 3.字体格式（需提供多种格式满足不同浏览器）

使用方法：

@font-face {
  /* 指定字体的名字 */
  font-family: "myfont";
  /* 服务器中字体的路径 */
  src: url("./font/ZCOOLKuaiLe-Regular.ttf") format("truetype");
}

font-family: myfont;

自定义字体方案

iconfont 图标字体

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

通过伪元素来设置图标字体

li{
    list-style: none;
}

li::before{
    /*
    1.找到要设置图标的元素通过before或after选中
    2.在content中设置字体的编码
    3.设置字体的样式
    fas
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    */
    content: '\f1b0';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: blue;
    margin-right: 10px;
}

fontawesome 使用步骤
1.下载 https://fontawesome.com/
2.解压
3.将css和webfonts移动到项目中
4.将all.css引入到网页中
5.使用图标字体
- 直接通过类名来使用图标字体
class="fas fa-bell"
class="fab fa-accessible-icon"

通过实体来使用图标字体：

1 2	&#x图标的编码; <span class="fas"></span>

通过类名指定
1
<i class="fas fa-cat"></i>

阿里图标库

平时自己练习可以使用，相对来说图标更多，质量更好
公司做项目一定要和原作者取得联系确认版权问题

如何使用？

找到你需要 icon

加入到购物车

将购物车中的图标加入项目

点击我的项目

将文件下载至本地

解压后得到

解压后得到

将剩下的文件拷贝到项目中

将剩下的文件拷贝到项目中

将css文件引入

1	<link rel="stylesheet" href="./iconfont/iconfont.css">

复制需要使用的图标字体的Unicode编码，注意&#x是实体图标的使用方法
复制Unicode编码

伪元素使用

p::before {
  //注意需要转义，且没有&#x
  content: "\e625";
  font-family: "iconfont";
  font-size: 100px;
}

通过实体图标调用

1
2
3

<i class="iconfont">&#xe61c;</i>
<i class="iconfont">&#xe622;</i>
<i class="iconfont">&#xe623;</i>

通过类名调用

1	<i class="iconfont icon-qitalaji"></i>

在css中使用时，需复制demo测试文件中的代码

demo中的代码

@font-face {
  font-family: "iconfont";
  src: url("iconfont.eot");
  src: url("iconfont.eot?#iefix") format("embedded-opentype"), url("iconfont.woff2") format("woff2"),
    url("iconfont.woff") format("woff"), url("iconfont.ttf") format("truetype"),
    url("iconfont.svg#iconfont") format("svg");
}

.shopcar::after {
  content: "\e61c";
  font-family: "iconfont";
}