工具在线链接
油猴插件,点击自动安装
- 检测到符合条件的 icon 资源,自动注入代码。
- 之后再也不需要自己注入代码啦,降低使用成本。
功能简介
- iconfont web 在线预览工具,无需安装,打开即用。
- 可预览本地 ttf、woff、woff2 文件中定义的所有 icon。
- 也支持预览 阿里iconfont 中的三种模式,unicode,Font class,Symbol。根据在线字体链接即可解析预览其定义的所有icon。
需求背景
本工具用于解决以下问题
接手二手项目时,不清楚项目中定义了哪些 icon。
- 接手二手项目,有时由于交接不到位,只能找到引用的 css。但不清楚该 icon 库具体包含哪些 icon。
- 导致二次开发时,不能很好地复用之前的 icon,若引入新icon,可能还会重复定义。导致前后 icon 风格不统一。
使用外部样式库,成套的后台管理系统框架时。找到其 icon 的定义列表比较麻烦。
- 需要先找到对应的官网,再找到其对 icon 定义。整个过程较为繁琐。而且还不一定有介绍。
- 故笔者开发了这个 iconfont 在线预览工具,无需安装,打开web页面即可预览 icon 库。
使用教程
使用本地文件
- 点击按钮
- 选择 ttf、woff、woff2 后缀文件
- 解析成功
- 点击具体图标,可复制该 icon 代码
解析在线文件(针对阿里图标库)
复制在线资源链接
- 针对 unicode 模式,复制在线 ttf、woff、woff2 文件链接
- 针对 Font class 模式,复制在线 css 文件链接
- 针对 Symbol 模式,复制在线 js 文件链接
- 点击解析
- 解析成功,点击具体图标,可复制该 icon 代码
iconfont相关知识
之前一直只知道怎么用 iconfont ,但并没有深入了解相关知识,最新学习了一下,在这里跟大家分享。
阿里图标三种模式
unicode 模式
- 它本身和引用外部自定义字体没有区别。只是一个表现出来是图形,另一个是文字。对系统来说,没有区别。
- 引用 iconfont 和引用自定义字体,使用的代码是一样
定义字体族
@font-face { font-family: 'iconfont'; /* 自定义字体族名,可以是任意名, */ src: url('//at.alicdn.com/t/font_1357308_kygursq6jw.eot'); /* 字体描述文件链接 */ src: url('//at.alicdn.com/t/font_1357308_kygursq6jw.eot?#iefix') format('embedded-opentype'), /* 兼容 IE9 */ url('//at.alicdn.com/t/font_1357308_kygursq6jw.woff2') format('woff2'), /* 兼容 IE6-IE8 */ url('//at.alicdn.com/t/font_1357308_kygursq6jw.woff') format('woff'), /* 兼容 chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('//at.alicdn.com/t/font_1357308_kygursq6jw.ttf') format('truetype'), /* 兼容 chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('//at.alicdn.com/t/font_1357308_kygursq6jw.svg#iconfont') format('svg'); /* 兼容 iOS 4.1及以上 */ }
使用字体族(无论是文本还是icon)
.iconfont { font-family: "iconfont" !important; /*使用自定义字体或者icon*/ /* 上面一句,和我们平时定义「微软雅黑」(font-family: "Microsoft YaHei", sans-serif;)字体是同样的语法 */ /* 只是「微软雅黑」在大部分电脑都会自带有,浏览器能直接找到系统的「微软雅黑」字体描述文件,不需要我们自己定义字体族,不需要使用外部的字体描述文件 */ }
- 「\&\#」的意思,「\&\#」 开头的是HTML实体。所有 html 显示的内容,都可以通过 的形式表述。例如,汉字的HTML实体由三部分组成,
&#(中文对应ASCII码);
。例如,把“最新” 转换成“\最\新” - 为什么中英文能直接显示,不需要使用「\&\#」形式表示呢?因为中英文有 ASCII 进行自动转义。而 iconfont 不在 ASCII 中定义。是自定义的。
- iconfont 相当于使用了剩余的 unicode 编码,将自定义的图标描述通过 开头的 HTML 实体的形式表现出来。
- 以「\&\#」开头的后接十进制数字,以「\&\#\x」开头的后接十六进制数字
Font class
- 该模式和 unicode 模式是同样的原理,通过 unicode 编码保存。只是使用方式不同。
- unicode 是直接将内容写到 innerHTML 中转义,而 font class 则是通过 css 的 :before 伪类,将通过 content 来定义。
- 在 font class 中,「\&\#\x」被转义符「\」替换,因为「\&\#\x」是 html 实体字符,只会被 html 解析,不能在 css 中被解析。
通过阿里iconfont 给出的 css 链接,在浏览器中直接查看该文件可以看到其定义
Symbol
- 该模式和上述二者有本质区别,Symbol 模式是通过 svg 技术来描绘图标,没有运用到 unicode 编码
- 即通过不同的 svg 标签来描绘不同的图标。
- 由于使用的是 svg 技术,属于图形,而不仅仅是字符。所以该模式支持彩色图标。
- 通过阿里 iconfont 给出的 js 链接,在浏览器中直接查看该文件可以看到其定义
不同文件后缀的含义
- EOT(Embedded Open Type)是微软创造的字体格式。在 IE 系列的浏览器下使用。
- SVG(Scalable Vector Graphics (Font))是一种用矢量图格式改进的字体格式。注意这里的 svg 与 symbol 的 svg 是两个概念。前者是 svg 类型的字体描述,后缀是直接描述svg 图形。该模式在 ios 移动端中才支持
- OTF(OpenType Font)和 TTF(TrueType Font)是 Apple 公司和 Microsoft 公司共同推出的字体文件格式,随着 windows 的流行,已经变成最常用的一种字体文件表示方式。目前主流浏览器都支持该模式。
- WOFF(Web Open Font Format),WOFF字体通常比其它字体加载的要快些,使用了 OTF 和 TTF 字体里的存储结构和压缩算法。目前主流浏览器都支持该模式
- 其具体兼容性情况,我们可以通过打开 iconfont 的 Font class 链接,通过备注信息得知。
工具代码讲解
- 工具 除了 vue 和 opentype.js,本工具仅由一个 html 文件完成。有兴趣的同学可以点击这里查看源码。
工具的原理很简单,通过以下几个步骤实现
- 获取字体定义文件。对于本地解析,通过input框获取本地文件。对于在线文件,则通过 ajax 获取字体定义文件。
- 对于在线的 css 与 js 文件,通过正则匹配所有 icon 名称,并通过数组保存。对于 ttf 文件,则借助 opentype.js 进行解析。
- 动态创建 dom,载入资源文件,并将采集到的所有 icon 遍历显示出来。
为什么需要借助 opentype.js 解析 ttf、woff、woff2 文件
- 因为 ttf、woff、woff2 文件通过 big-endian 编码,使普通的方式无法进行编码转义。无法进行正则匹配。
- 故借助外部 opentype.js 库进行图标解析。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。