非零基础自学前端最后一遍一 HTML+CSS 14 额外知识补充 14.5 字体图片的原理和使用流程

本是古典何须时尚 2024-03-22 15:28 16阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  14 额外知识补充
         *   *  14.5 字体图片的原理和使用流程
             *   *  14.5.1 认识字体图标
                 *  14.5.2 字体图标的使用

![在这里插入图片描述][61ae9ce44b7f4f5db9a03a8df066fe5d.png_pic_center]

#### 一 HTML+CSS ####

#### 14 额外知识补充 ####

##### 14.5 字体图片的原理和使用流程 #####

###### 14.5.1 认识字体图标 ######

*  思考：字体可以设计成各式各样的形状，那么能不能把字体直接设计成图标的样子呢？
    
     *  当然可以，这个就叫做字体图标。
 *  字体图标的好处：
    
     *  放大不会失真
     *  可以任意切换颜色
     *  用到很多个图标时，文件相对图片较小
 *  字体图标的使用：
    
     *  登录阿里icons（https://www.iconfont.cn/）
     *  下载代码，并且拷贝到项目中
 *  将字体文件和默认的css文件导入到项目中

###### 14.5.2 字体图标的使用 ######

字体图标的使用步骤:

*  第一步: 通过link引入iconfont.css文件
 *  第二步: 使用字体图标

使用字体图标常见的有两种方式:

*  方式一: 通过对应字体图标的Unicode来显示代码;
 *  方式二: 利用已经编写好的class, 直接使用即可;

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        @font-face {
         
          font-family: "iconfont";
          src: url("./fonts03/iconfont.ttf");
        }
    
        .iconfont {
         
          font-family: "iconfont";
          font-style: normal;
        }
    
        .music::before {
         
          content: "\e664";
        }
    
        .icon {
         
          display: inline-block;
          width: 20px;
          height: 20px;
        }
      </style>
    </head>
    
    <body>
    
      
      <i class="iconfont"></i>
      <i class="iconfont"></i>
    
      <i class="icon"></i>
    
      
      <i class="iconfont music"></i>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][da05de28e2b84c5ab35812d873eb9ee9.png_pic_center]

使用iconfont配置的css

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="./fonts03/iconfont.css">
      <style>
        .icon-shouye {
         
          font-size: 30px;
          color: red;
        }
      </style>
    </head>
    
    <body>
    
      <i class="iconfont icon-shouye"></i>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][fb251530b0e843f1b4f487ead8221c7e.png_pic_center]

[61ae9ce44b7f4f5db9a03a8df066fe5d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/7699bcb472184f3c909b12be9fb22ea2.png
[da05de28e2b84c5ab35812d873eb9ee9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/6333843857e84fe7bd0259ff47b93f06.png
[fb251530b0e843f1b4f487ead8221c7e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/48778d14de8949d5881ae2627f31a610.png