移动web_字体图标

字体图标

字体图标的优点

1.他是文本内容，矢量图，放大不会失真

2.因为是文本所以可以用文本的样式来设置
字体图标与精灵图比较

1.精灵图可以将多个图存放在一个文件上，所以请求只有一次，但是精灵图存在放大会失真的问题

2.字体图标因为是矢量图由点、线、面组成，所以不会存在放大失真的问题

字体图标的的下载及使用

iconfont下载链接:

ali-iconfont

icomoon

ali-iconfont使用：

选择字体图标，加入购物车
添加至新创建的本地项目
点击创建项目找到下载至本地按钮
下载后进行解压缩，解压缩后重命名'iconfont'
复制到项目的根目录
项目内引用

<!--

1.用link标签引入iconfont.css文件；

2.用i标签承接字体图标，<i class="iconfont icon-xxx"></i>

 -->

<div class="box">

    <div class="iconfont icon-cancle"></div>

  </div>

<!-- 2.通过i标签把unicode编码复制过来 -->

<body>

    <i></i>

  </body>

icomoon使用：

同上步骤一致,可参考详细使用教程

这里只讲引用步骤

icomoon与ali-iconfont 不一样的地方就是icomoon文件中的style.css已经包含了icon的图标字体样式：

[class^="icon-"], [class*=" icon-"] {

  /* use !important to prevent issues with browser extensions that change fonts */

  font-family: 'icomoon' !important;

  speak: never;

  font-style: normal;

  font-weight: normal;

  font-variant: normal;

  text-transform: none;

  line-height: 1;

  /* Better Font Rendering =========== */

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

所以引用的时候不用先写字体图标（这里是'icomoon'）了只需引用字体图标名称即可

在线图标库引用：

将图标添加到项目，项目会有一个对应的地址
link 加图标地址

<!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>

    <!-- 在线引入字体图标，注意前面要加http: -->

    <link

      rel="stylesheet"

      href="http://at.alicdn.com/t/font_2970681_7my4eaeshh7.css"

    />

  </head>

  <body>

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

  </body>

</html>

好处：在线图标库不用将图标的资源文件下载到本地，减少本地项目的体积，为以后的项目上线打包做准备；如果添加新的图标，不用再重新下载覆盖。

坏处：如果引用图标的网页链接失效的话，就会影响我们的项目网页

symbol引用（未来的主流）：

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：

支持多色图标了，不再受单色限制。

通过一些技巧，支持像字体那样，通过,来调整样式。

兼容性较差，支持 ie9+,及现代浏览器。

浏览器渲染svg的性能一般，还不如png。

使用步骤如下：

第一步：引入项目下面生成的symbol代码：

如：

 <script src="./iconfont.js"></script>

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

"text/css">.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}</style>

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

class"icon""true"usexlink:href"#icon-xxx"use></svg>

如有不足请谅解！希望给您带来帮助。

本文参考来自于 https://blog.csdn.net/muzidigbig/article/details/80371341