从字体图标到svg——Web图标发展史以及iconfont矢量图标库的使用

一二小选手

已于 2024-08-07 08:11:14 修改

阅读量981

点赞数 30

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

于 2024-08-06 17:22:31 首次发布

本文链接：https://blog.csdn.net/m0_66584716/article/details/140960832

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

一、Web图标发展史
二、iconfont矢量图标库的代码应用
三、iconfont矢量图标库的具体使用（多图）
四、参考文章

一、Web图标发展史

1.独立图片

（1）使用 <img> 标签引入图片文件，通过 width、height 来图标大小

（2）使用 CSS 的 background-image 设置页面图标。

<img src="search.png" alt="搜索" width="24" height="24" />

.icon {
  width: 24px;
  height: 24px;
  background-image: url(search.png);
}

缺点：

增加 HTTP 请求，占用并行加载数量，导致页面加载缓慢。
图标的颜色都在图片文件中，无法由开发者动态设置颜色。
难以维护，多个状态的图标都是单独文件，会增加图片文件数量。
在 hover 鼠标悬停切换图标时，会出现首次加载图片的等待状态，体验极差。

2.CSS Sprite

精灵图 / 雪碧图

将多个图片通过一些工具合并成一张大图，使用 CSS 的 background-image 引入大图，background-position 进行背景定位来显示对应位置的图标

缺点：

雪碧图的大小会随着图标的数量递增，同时无法进行按需加载。
页面打开后，需要加载完整个雪碧图才能显示图标，会出现较长的加载时间。
颜色都在图片中，依旧无法由开发者动态设置。
图标的位置一旦在雪碧图中发生改变，background-position 需要重新设置。
维护成本高，设计师将图标提供给开发者，开发者需要将所有图标重新生成雪碧图。

3.字体图标

由于图标从某种程度上来看可以被视为“象形文字”，所以当 CSS 开始支持 @font-face 引入 web font，人们立刻想到了用它来载入、显示图标。

FontAwesome

阿里的 iconfont.cn 平台从多年前开始就已经成为国内最受欢迎的图标托管、共享、管理平台。可以说字体图标时至今日还是最热门的 web 图标方案之一。

字体图标的原理非常简单，通过占用一些 Unicode 字符编码（通常是私人使用区，U+E000-U+F8FF、U+F0000-U+FFFFD 以及 U+100000-U+10FFFD 范围内）并为其绘制字形，同时生成好一堆预定义的图标名 class name，通过 web font 的方式加载资源，通过对应的 class name 来引用图标。由于各个浏览器对 web font 支持的字体格式兼容性有差异，往往需要生成多个格式的字体供浏览器进行选择性加载：

/* iconfont.cn 生成的样式文件大致如下： */
@font-face {  font-family: "iconfont";  
    src: url('iconfont.eot'); /* IE9 */  
    src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */  
        url('iconfont.woff2') format('woff2'),  
        url('iconfont.woff') format('woff'),  
        url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */  
        url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {  
    font-family: "iconfont" !important;
}
.icon-flag:before {  
    content: "\e233";
}

iconfont 相对于传统的直接导入图标进入页面，有以下几点优势

减少请求次数，将多个 icon 合并到一个字体文件中，从而提高网页性能；
更加便捷的进行前端操作，当需要改变iconfont 的大小和颜色时，可以直接通过css 或js 对样式进行控制（本质是字体）；
矢量图不失真，解决图片像素点会随页面变化而模糊必须配置多张图片进行自适应的问题；
体积更小，页面加载速度更快；
适合多平台（浏览器、iOS App、Android App）。

4.SVG 图标

SVG 英文全称为( Scalable Vector Graphics)，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言。

svg Sprite的一种实现思路 <symbol> +　<use>

svg 的<symbol> 在svg 中主要适用于定义可复用的符号，而这些定义在<symbol> 元素的形状将不会被展示出来，而是通过<use> 元素引用来显示。<use> 元素可以在任何地方复用svg 文件中定义的形状。

<body>
    <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
        <symbol id="svg-github"  viewBox="0 0 1024 1024">
            <title>github</title>
            <path  d="M941.714 512q0 143.433-83.712 258.011t-216.283 158.574q-15.433 2.853-22.565-3.986t-7.131-17......" p-id="3347" />
        </symbol>
    </svg>
    1、使用方式一
    <svg class="svg-icon">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-github" />
    </svg>
    2、使用方式二，外链式引入
    <svg class="svg-icon2">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="./icon.svg#svg-github" />
    </svg>
    <style>
        .svg-icon2{
            fill:#06c;
        }
    </style>
</body>

svg 与icon-font 使用场景

图标是整站统一的，会跨项目重复使用。
适配 Retina 屏。
同一图标根据不同的使用场景，大小，颜色会有所不同，存在颜色叠加的情况。

svg 与icon-font 对比

渲染方式：icon-font采用的是字体渲染，在一倍屏幕下渲染效果并不好，在细节部分锯齿还是很明显的；SVG是传统图片格式的一种，自身提供的功能集涵盖了嵌套转换、裁剪路径、Alpha通道、滤镜效果等能力，它还具备了传统图片没有的矢量功能，在任何高清设备都很高清。在浏览器中使用的是图形渲染，所以就是实实在在的路径。SVG不需要发起资源请求，可以随着 HTML 内容进行流式加载和渲染，不会产生任何闪动的体验问题。

CSS 控制：icon-font 可以通过 CSS 控制图标大小（font-size），颜色，阴影，旋转等。SVG和 icon-font 一样可以使用同样的控制器。还可以控制图标的各个部分；使用 CSS 控制 SVG 特有的属性，如描边属性；svg动画。

颜色支持：icon-font 只支持单色；SVG支持单色、多色图标。

定位：icon-font 图标通过伪元素插入，依赖于 line-height ， vertical-align，letter-spacing ， word-spacing ，字体字形设计（它的四周有留白吗？它有字距信息吗？）。如果字符有相关特效，伪元素将会显示这些特效。SVG 的显示尺寸就是它本身的尺寸

网络加载、性能、语义化…

5.前端组件框架

现在是一个 web 端渲染逻辑被移到前端，前端工程方向被组件化框架主导的时代。在使用 React/Vue/Angular/Svelte/…… 等各种框架的过程中，我们已经习惯于将视图逻辑通过组件进行拆解和复用。那么我们很自然地就可以通过设计图标组件来对底层方案进行一层封装，暴露给前端更简单直接的 API 来使用图标。要注意的是，这并没有在根本上改变 web 图标渲染的方式，底层依然是基于前文提到的各种方案。在不使用这些视图层框架的项目中，我们依然仰赖使用上述 low-level 的实现来进行开发。

二、iconfont矢量图标库的代码应用

1.unicode

优势

兼容性最好，支持ie6+
支持按字体的方式去动态调整图标大小，颜色等等
（新版iconfont支持彩色字体图标）

使用方法：

第一步：引入自定义字体 font-face

@font-face {
   font-family: "iconfont";
   src: url('iconfont.eot'); /* IE9*/
   src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('iconfont.woff') format('woff'), /* chrome, firefox */
   url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
   url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
 }

第二步：定义使用 iconfont 的样式

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

第三步：挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#xe604;</i>

在这里插入图片描述

原理

通过 @font-face 引入自定义字体(其实就是一个字体库)，它里面规定了&#xe604 这个对应的形状就长这企鹅样。缺点是unicode的书写不直观，语意不明确。

2.font-class

优势

兼容性良好，支持ie8+，及所有现代浏览器。
相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤

第一步：拷贝项目下面生成的fontclass 代码

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

第二步：挑选相应图标并获取类名，应用于页面

<i class="iconfont icon-QQ"></i>

在这里插入图片描述

原理

其实是和 unicode 一样的，它只是多做了一步，将原先&#xe604这种写法换成了.icon-QQ，它在每个 class 的 before 属性中写了unicode,省去了人为写的麻烦。如 .icon-QQ:before { content: "\e604"; }

在这里插入图片描述

3.symbol

使用步骤

第一步：拷贝项目下面生成的symbol代码

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

第二步：加入通用css代码（引入一次就行）

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor; /* 当前色 使用当前该元素所处环境的文字颜色 */
       overflow: hidden;
    }
</style>

第三步：挑选相应图标并获取类名，应用于页面

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

三、iconfont矢量图标库的具体使用（多图）

第一步：注册登录

阿里巴巴iconfont矢量图标库

https://www.iconfont.cn/

第二步：新建项目

找到【资源管理】——【我的项目】

在这里插入图片描述

点击【新建项目】
在这里插入图片描述

为项目命名，其他项可默认。

第三步：添加图标到项目

搜索想要添加的图标，悬浮点击购物车添加

在这里插入图片描述

在购物车中将选好的图标添加至新建的项目（多选错选可点击删除）

第四步：在页面中引入字体文件

① 引用线上地址（以 Font class 为例）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iconfont的使用--引用线上地址</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4636607_tcdkht5phy.css">
</head>
<body>
    <i class="iconfont icon-shouji"></i>
    <span class="iconfont icon-91jiazai"></span>
    <!-- i标签和span标签都可以 类名iconfont必写 -->
</body>
</html>

在这里插入图片描述

② 下载到本地

可以使用 Font class 和 Unicode

在这里插入图片描述

点击下载到本地

解压压缩包添加字体图标文件到项目
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iconfont的使用--下载到本地</title>
    <link rel="stylesheet" href="font/iconfont.css">
</head>
<body>
    <i class="iconfont icon-sousuo"></i>
    <i class="iconfont">&#xeafe;</i>
</body>
</html>

在这里插入图片描述

字体图标的优势

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>矢量图放大不模糊</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        .icon-sousuo:hover {
            font-size: 36px;
            color: brown;
        }
    </style>
</head>
<body>
    <i class="iconfont icon-sousuo"></i>
    <!-- <i>&#xe630;</i> -->
    <img src="img/sousuo.png"/>
</body>
</html>

在这里插入图片描述

第五步：更新

一、Unicode 方式

每次新增图标后更新代码@font-face拷贝代码替换本地的。

二、font-class 方式

每次更新图标更新代码，本地可以直接引用线上更新后的css文件。

四、参考文章

从 Web 图标演进历史看最佳实践-腾讯云开发者社区-腾讯云 https://cloud.tencent.com/developer/article/1852167

手摸手，带你优雅的使用 icon https://juejin.cn/post/6844903517564436493

一二小选手

关注

30
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
从字体图标到svg——Web图标发展史以及iconfont矢量图标库的使用

要注意的是，这并没有在根本上改变 web 图标渲染的方式，底层依然是基于前文提到的各种方案。在浏览器中使用的是图形渲染，所以就是实实在在的路径。：icon-font 图标通过伪元素插入，依赖于 line-height ， vertical-align，letter-spacing ， word-spacing ，字体字形设计（它的四周有留白吗？范围内）并为其绘制字形，同时生成好一堆预定义的图标名 class name，通过 web font 的方式加载资源，通过对应的 class name 来引用图标。
复制链接

扫一扫