iconfont及自定义字体

﹏ヽ暗。殇╰゛Y 2023-07-09 07:29 1阅读 0赞

# iconfont及自定义字体 #

## 一、iconfont ##

##### iconfont: #####

将iconfont拆开来看，就是icon（图标）和font（字体）。简单的说iconfont就是利用字体工具把我们平时网页上用的图形图标转换成网页字体。其实跟字体差不多，字体对应的是文本，iconfont对应的是图标

##### iconfont的优势： #####

1、相比图片的大小容量，iconfont几乎是羽翼级轻量。  
2、图标都被打包在字体库里面，减少了HTTP的请求数量，加速网页加载速度。  
3、使用iconfont非常方便，和设置网页字体一样，可以利用CSS来定义图标大小、图标颜色、图标透明度等

##### iconfont的劣势： #####

1、利用CSS无法方便的定义多彩的icon，大部分是单一颜色。  
2、因为iconfont跟字体有关，所以它很容易受到字符编码的影响。

##### iconfont的使用： #####

Iconfont-阿里巴巴矢量图标库  
![网页图片][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbnNpc3RlbnRfXw_size_16_color_FFFFFF_t_70]  
1.新建项目，将自己需要的图标加入购物车  
![购物车][20200228131243866.png]  
2.点击下载代码  
![下载][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbnNpc3RlbnRfXw_size_16_color_FFFFFF_t_70 1]  
3.下载好的文件打开后：![下载好的文件][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbnNpc3RlbnRfXw_size_16_color_FFFFFF_t_70 2]  
4.打开demo.html  
![demo.html][]  
使用步骤：  
(1)在css中复制生成的@font-face

@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');
    }

(2)定义使用 iconfont 的样式(还可以设置颜色color)

.iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

(3)挑选相应图标并获取字体编码，应用于页面

## 二、自定义字体 ##

1.首先下载好字体文件.ttf [字魂网][Link 1]  
2.@font-face引入字体文件，并且定义该字体的名称为：Font（自己随便写）

3.使用

<body>
        <div class="font">哈哈哈哈</div>
    </body>
    
    <style> 
        @font-face{
        　　font-family: Font;
        　　src: url('字体文件路径.ttf') 
    　　} 
    　　body{ font-family：Font; } 
    </style>

*自定义字体图片：*  
![自定义字体][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbnNpc3RlbnRfXw_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbnNpc3RlbnRfXw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020022813101259.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbnNpc3RlbnRfXw==,size_16,color_FFFFFF,t_70
[20200228131243866.png]: https://img-blog.csdnimg.cn/20200228131243866.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbnNpc3RlbnRfXw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020022813143620.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbnNpc3RlbnRfXw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbnNpc3RlbnRfXw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200228131801973.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbnNpc3RlbnRfXw==,size_16,color_FFFFFF,t_70
[demo.html]: https://img-blog.csdnimg.cn/20200228131947642.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbnNpc3RlbnRfXw==,size_16,color_FFFFFF,t_70
[Link 1]: https://izihun.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbnNpc3RlbnRfXw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2020022814412652.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbnNpc3RlbnRfXw==,size_16,color_FFFFFF,t_70