06-HTML字体与字体图标

利刃之灵

已于 2025-06-27 18:21:17 修改

阅读量417

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端

于 2025-06-27 17:33:00 首次发布

本文链接：https://blog.csdn.net/q2430605716/article/details/148957655

前端专栏收录该内容

6 篇文章

订阅专栏

一、字体的使用

1.1.使用配置有的字体

font-family以下的是本地已有字体，可以随便选一个

请添加图片描述

1.2.使用其他字体

可以去字体天下(https://www.fonts.net.cn/fonts-zh-1.html)下载一些字体文件

请添加图片描述

把下载好的字体解压一下

请添加图片描述

里面有一个ttf文件，通过@font-face我们就可以在自己的代码中引用这个字体

请添加图片描述

很好，现在我们可以愉快的使用啦！😄

二、字体图标

字体图标即可以像操作字体一样操作的图标，通常可以在阿里的https://www.iconfont.cn/找到大量的图标，这些图表可以作为图片使用也可以制作成字体图标

下面我来演示一下：

2.1.把图标加入购物车

请添加图片描述

2.2.下载代码

请添加图片描述

2.3.解压下载的压缩包

请添加图片描述

2.4.查看图标的编码序号

压缩包里有很多文件，我们打开这个html文件

请添加图片描述

这个html文件不仅有字体的编码，还提供了一下使用教程

请添加图片描述

2.5.引用字体图标

2.5.1.使用图标编码的方法

之前的压缩包还提供了ttf字体文件，让我们可以像操作字体一样操作他们

请添加图片描述

直接用元素内容（如以下代码的span元素）直接使用Unicode（即之前查看的图标编码）即可显示图标，但使用伪元素（如以下代码的before伪元素）则可能需要使用十六进制即把&#x改成\

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       @font-face {
          font-family: 'myfont';
          src: url('../assets/font/font1.ttf');
        }
       @font-face {
          font-family: 'iconfont';
          src: url('../assets/icon/iconfont.ttf');
        }
       div{
            font-family: "myfont";
          font-size: 40px;
       }
       div::before{
          content: "\e611";
          font-family: 'iconfont';
       }
       span{
          font-family: 'iconfont';
       }
    </style>
</head>
<body>
    <div>
       我欲见你何惧春秋
    </div>
    <br>
    <span>&#xe611;</span>
</body>
</html>

请添加图片描述

2.5.2.使用类的方法

可以把之前压缩包的css文件添加到自己文件中

请添加图片描述

这个css给我们配置好了使用的图标类，不过src可能要手动改一下路径。。。

请添加图片描述

然后这样使用就可以了

<div class="iconfont icon-electro">
    我欲见你何惧春秋
</div>

请添加图片描述