字体图标了解

目录
  1. icomoon
  2. 阿里巴巴图库
  3. 同时引用icomoon、阿里巴巴图库
  4. 在线链接小图标

生当作人杰，死亦为鬼雄。

本文为本人略读官网文档后的大略笔记，实在不适合他人阅读。

前言

图片格式

1. 位图
  bmp、jpg、gif、png   
  清晰。放大失真锯齿、占空间大。
2. 矢量图
  svg（Scalable Vector Graphics） XML格式定义
  放大不失真、占空间小。
  资源库：阿里图库、icomoon

传统图标与字体图标

传统图标
  使用位图：bmp、jpg、gif、png格式
字体图标
  可像字体一样进行配置

css sprite（css雪碧图）若干图标合成的一张图

若网页中有上千张网络图片，一个个网络下载会造成阻塞。
雪碧图只会下载一次。

优点：
    减少http请求次数，页面加载速度提快，提高网页性能
缺点：
    不利于维护（根据坐标得到每一个小图标）

1. icomoon（单色）

icomoon官网地址

1. 使用步骤

引入style.css
  <link rel="stylesheet" type="text/css" href="css/style.css">

显示图标
  方式1:font+html
  从icomoon.svg中拿到图片的unicode编码
  使用<span class="icon-">&#xe910;</span>方式显示图标。
  方式2:font+css
  在style.css中拿到icon-home2
  使用<span class="icon-home2"></span>方式显示图标。

class="icon-" 表示使用style.css文件中的配置

第一步：选择图片 第二步：生成图片并下载 第三步：解压缩文件夹 第四步：将style.css和fonts文件夹复制到项目中 第五步：从icomoon.svg中拿到图片的unicode编码 第六步：引入style.css并通过<span class="icon-">unicode编码</span>引入图片 显示效果：放大不失真

2 . style.css文件内容说明

style.css文件

style.css文件中
  @font-face{} 中通常不设置font-weight、font-style等，因为会影响全局。
  class^="icon-"  使用class="icon-"会使用后面{}内的字体设置，可以自定义更改

可以自定义字体样式
  1. 创建customStyle.css  
  .customFont{  
    color:red;
  }
  2. 使用
  <link rel="stylesheet" type="text/css" href="css/customStyle.css">
  <span class="icon- customFont">&#xe910;</span>

字体描述	属性值	作用
font-family	name	字体名（必填）
src	URL	字体地址（必填）
font-weight	normal（默认）、bold、100-900	字体粗细
font-style	normal（默认）、italic、oblique	样式
font-display	block、

3. 新图标加入

场景1（旧图标选中状态被保留情况下）

在icomoon官网地址选择新图标时要确保旧图标被选中，重新下载并覆盖项目中的style.css文件和fonts文件夹。

场景2（旧图标选中状态已经丢失情况下）

下载完新图标后，在fonts原文件夹下创建one、two...文件夹，分别存放每次下载的图标

2. 阿里巴巴图库

阿里巴巴图库官网

1. 使用步骤（单色）

引入iconfont.css
  <link rel="stylesheet" type="text/css" href="css/aliFonts/iconfont.css">

显示图标
  方式1: font+html
  <span class="iconfont">&#58881;</span>
  方式2: font+css
  <span class="iconfont icon-ren"></span>

第一步：选择图标 第二步：点击购物车，选择下载代码 第三步：解压缩，除demo_index.html和demo.css外复制到项目中 第四步：从iconfont.svg中拿到图片的unicode编码 第五步：引入iconfont.css并通过<span class="iconfont">unicode编码</span>引入图片 显示效果

2. iconfont.css文件内容说明

iconfont.css

3. 彩色图标 Symbol方式（多色）

alifonts文件夹外创建index.css
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}


引入
<script src="css/aliFonts/iconfont.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css">

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

index.html

4. 新图标加入

场景1（旧图标选中状态被保留情况下）

在阿里图库官网地址选择新图标时要确保旧图标被选中，重新下载并覆盖项目中的alifonts文件夹。

场景2（旧图标选中状态已经丢失情况下）

下载之后，在aliFonts原文件夹下创建one、two...文件夹，分别存放每次下载的图标

5. 图标样式配置

注意：
  color对于彩色图标无效

修改自定义文件index.css
  添加iconFontSize样式

使用
  <span class="iconfont iconFontSize">&#58881;</span>

修改index.css index.html 运行效果

3. 同时引用icomoon、阿里巴巴图库

方式一（分别引用icomoon、阿里巴巴图库）
方式二（步骤如下）

第一步：icomoon选择Generate SVG 第二步：阿里图库官网，我的项目，创建新项目，点击上传图标至项目 第三步：将从icomoon下载的svg文件拖入 第四步： 第四步：保留颜色提交 第五步：下载到本地 第六步：后续使用同第二小节

4. 在线链接小图标

第一步：生成 第二步：unicode方式，将@font-face内容存入新建的netFont.css，使用unicode码方式 netFont.css文件内容 第二步：font class方式，<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1721084_u85osr2znjs.css"> index.html内容 第二步：symbol方式，<script src="//at.alicdn.com/t/font_1721084_u85osr2znjs.js"></script> index.html内容

1. 新增图标

unicode方式：更新@font-face内容

font class方式：更新font class地址

symbol方式：更新symbol地址