IconFont使用指南

迷城梦境
606 阅读9分钟

IconFont

目录

  • 什么是IconFont
  • 设计师如何添加IconFont
  • 码农使用Iconfont
  • 如何管理项目IconFont

什么是IconFont

icon font ，图标字体，也叫字体图标，顾名思义，就是字体做的图标。受到近些年 扁平化设计 的影响，越来越多的图标都开始使用 icon font

优点：

  1. 自由的变化大小，且不会模糊
  2. 比图片小，加载快
  3. 可以任意改变颜色

缺点：

  1. 只能被渲染成单色或者CSS3的渐变色
  2. 创作自已的字体图标很费时间，重构人员后期维护的成本偏高。

了解 iconfont 之前我们先看看 WebFont

我们都知道，在网页制作中，会经常用到不同的字体，常用的有 微软雅黑、宋体、Aria 等等。在我们写css的样式的时候，通过 font-family 可以指定元素的字体名称。

如果是 特殊字体 ，因为我们的电脑没有安装那个字体，所以在网页中显示不出来，所以我们通过 @font-face 来引入特殊字体。

看看 @font-face 的语法规则：

@font-face {
    font-family: <YourWebFontName>;
    src: <source> [<format>][,<source> [<format>]]*;
    [font-weight: <weight>];
    [font-style: <style>];
}

取值说明：

  • YourWebFontName：字体名称，他将被引用到元素中的 font-family 上
  • source：字体的存放路径，跟css引用图片一样；
  • format：字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype , opentype , truetype-aat , embedded-opentype , svg 等；
  • weight和style：这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。

关于 @font-face 的浏览器兼容性：

img

浏览器兼容性

其实 @font-face 这个功能早在IE4就支持了，我们看看兼容写法：

@font-face {
    font-family: 'YourWebFontName';
    src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
    src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
         url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}
  • TrueType(.ttf) 格式： .ttf 字体是 Windows 和 Mac 的最常见的字体，是一种 RAW 格式，因此他不为网站优化,支持这种字体的浏览器有 【IE9+ , Firefox3.5+ , Chrome4+ , Safari3+ , Opera10+ , iOS Mobile Safari4.2+】
  • OpenType(.otf) 格式： .otf 字体被认为是一种原始的字体格式，其内置在 TureType 的基础上，所以也提供了更多的功能,支持这种字体的浏览器有**【Firefox3.5+ , Chrome4.0+ , Safari3.1+ , Opera10.0+ , iOS Mobile Safari4.2+】**
  • Web Open Font Format(.woff) 格式： .woff 字体是Web字体中最佳格式，他是一个开放的 TrueType/OpenType 的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有**【IE9+ , Firefox3.5+ , Chrome6+ , Safari3.6+ , Opera11.1+】**
  • Embedded Open Type(.eot) 格式： .eot 字体是IE专用字体，可以从TrueType 创建此格式字体,支持这种字体的浏览器有 【IE4+】

WebFont 技术可以让网页使用在线字体，在国外，WebFont 已经非常流行了，大量的网站使用了 WebFont 技术，而业界大佬 Google 也顺势推出的免费 WebFont 云托管服务，这一切均带动了国外字体制作行业的高速发展。

为什么是国外呢，那是因为中文字体比较尴尬，英文字体只有26个字母，一套字体不过几十 KB ，而汉字却有数万个，导致字体文件通常有好几 MB 大小，再加上国内的网络环境，显然不现实。

所以中文的 特殊字体 必须经过压缩才能使用，怎么压缩呢，请看 腾讯ISUX 开发的 中文字体压缩器--字蛛（FontSpider） 。

因为这篇主要讲的是 iconfont ，所以我就不详细的讲 字蛛 的使用方法了， 字蛛 官网很详细。

说说 iconfont 的原理

每种字体在相同的字都是不一样的，比如 宋体 跟 微软雅黑 ，相同的字 ，由于调用的不同的字体，浏览器显示明显是有区别的。

在我们还不识字的时候，每个字都是一个图案，所以老师会告诉你哪个图案念什么 ，是什么字，iconfont 同理，我认为 三角形 是 a，那对于我来说，只要是 a ，就应该是个 三角形。

在电脑上，我给电脑规定 a 的样子是个 三角形，那么当显示 a 的时候，他就显示个三角形。

当我把网页上的所有图标都对应一个字符的时候，你在代码里输入某个字符，那这个字符就显示你规定的形状，这就是 iconfont 图标。

把所有的图标都放在一个字体里面，就是一个字体库了，然后按照正常字体库（本来就是正常的字体库）调用就行了。

iconfont 的制作

最初制作 iconfont 都是在字体制作软件里面制作，比如 FontLab、TypeTool、FontCreator之类的专业软件，我最开始的时候是使用的 FontCreator 来制作，我现在简单的给大家演示一下。

  1. 先新建一个字体文件

img

新建文件

  1. 随便打开一个字体，选中某个字符，ctrl+c 复制，然后选中新建的字体的某个字符，ctrl+v 粘贴。右键这个字符，编辑。

img

编辑文件

  1. 我们可以大概知道字体区域，我们做的图标也大概在这个区域

img

字体区域

  1. 随便找张图，比如中国移动的图标

img

中国移动的图标

  1. 把这张图导入到刚在的字体中

img

导入到刚在的字体中

  1. 调整图片的位置，把原先的图形选中，delete 删掉，保存

img

把原先的图形删掉

  1. 看看在网页中

img

代码

img

浏览器显示

  1. 一个 icon 就做好了，然后其他的也是这种方法
因为为了兼容，必须转换成四种格式，本地转换的工具很少，只能在在线转，这是国外的几个地址：

这样用字体软件做图标会很麻烦，有没有简单的办法呢？答案是肯定的，由 阿里妈妈UED 开发的 Iconfont-阿里巴巴矢量图标库 会帮大家快速的生成 iconfont。具体的制作方法请查看 Iconfont.cn 提供的 图标制作说明。

Iconfont.cn 上有大量的 iconfont 图标，可以快速的搜索，然后加到自己的项目中，网站可以用你的 新浪微博 登录。

扒别的网站的字体文件

在火狐里打开你要扒的网站，以天猫为例：

  1. 打开浏览器自带的 firebug ，用箭头指到那个图标

img

找到图标

  1. 选择字体，然后选择远程的那个地址，ctrl+a 全选，ctrl+c 复制

img

找到字体地址

  1. 把复制的地址粘贴到浏览器地址栏，然后把 .woff 改为 .ttf ，回车

img

修改格式并保存

  1. 保存到本地

img

保存到本地

  1. 为了兼容，一共要下载四个格式，分别是 .woff、.ttf、.eot、.svg ，只需把最后的格式改了，回车保存就好了

查看字体库的所有图标

既然是字体，肯定能用字体编辑软件查看，这里我推荐 TypeTool ，来看使用方法：

先看安装：

  1. 下载 TypeTool ，然后解压

img

TypeTool文件

  1. 先运行 TT3WinFull.exe 安装程序进行安装原版程序!
  2. 安装完成后记得先不要运行程序！
  3. 复制压缩包中的 fontlab.typetool.v3.1.2.build.4868-patch.exe 程序到安装目录！
  4. 运行 fontlab.typetool.v3.1.2.build.4868-patch.exe ，点击 Patch 按钮对源程序打补丁即可。（切记，打补丁时一定要关闭软件，否则会失败的！）
  5. 完成

查看图标：

以刚才下载的天猫字体为例

  1. 打开软件，打开字体文件

img

打开字体文件

  1. 打开之后可以看到所有的图标，选中某一个图标，可以看到图标对应的 unicode码

img

查看unicode码

  1. 把找到的 e60d 前面加 &#x 变为 ，直接写在 html 里面就可以了

img

代码

img

作者：不二很纯洁 链接：www.jianshu.com/p/aabf03b15… 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

设计师如何添加IconFont

  1. 访问 icon-font
  2. 寻找合适的icon-font
  3. 放入购物车image-20200819145410815
  4. 添加至项目image-20200819145525672
  5. 通知码农进行处理

码农使用Iconfont

首先需要了解三种使用方式的区别

Unicode 引用

Unicode 是字体在网页端最原始的应用方式，特点是：

​

  • 兼容性最好，支持 IE6+，及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小，颜色等等。
  • 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

font-class 引用

与 Unicode 使用方式相比，具有如下特点：

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

Symbol 引用

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

  • 支持多色图标了，不再受单色限制。
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
  • 兼容性较差，支持 IE9+，及现代浏览器。
  • 浏览器渲染 SVG 的性能一般，还不如 png。

基于现在大部分项目无需shimIE9及以下，故此处采用最为灵活的symbol用法做说明

引入方式分为两种

1、在线引入

获取在线链接

image-20200819150229048

不建议使用在线的，会发起请求，虽不大，但使用外挂api存在风险

2、下载至本地

解压至本地后，将iconfont.js放入项目

如果是第一次使用，建议创建公共组件

import { Icon } from 'antd';
import iconFontPath from '@src/components/common/Icon-Font/iconfont.js'
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: iconFontPath
});

export default IconFont;

在需要使用的页面，直接拿公共组件使用即可，用法示例

<IconFont type="icon-column-4" />

此处的type是从web上直接取得type，同时也可在本地压缩包中找到demo_index.html，内里有具体的type

image-20200819150943279

如何管理项目IconFont

后收藏，先删除，如果用不到的就删除，不要一股脑儿加在项目中，占用资源。

快速抓取所有IconFont

1.控制台粘贴回车
   var j=document.createElement('script');
    j.setAttribute("src", 'https://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js');
    document.getElementsByTagName("head")[0].appendChild(j);
2.控制台粘贴回车
    $("span[title='添加入库']").each(function(){
        $(this).delay(500).click();
        console.log($(this).parent().prev().children().eq(0).html());
    });

如有疑问可联系

auth :望春

email：chent1493@163.com

avatar
文章
阅读
粉丝