图标引入
# 前言
使用过ElmentUI
的同学都知道,ElementUI
提供了很多的图标供我们使用。使用的方式很简单,ElementUI
背后究竟做了什么黑魔法呢?本文会就着MSSUI
的实现,带你一探究竟。
# 字体图标渲染的原理
先看个例子:
这里需要注意,在 HTML 中使用unicode
字符需要使用&#x + 16进制编码
的形式;当你将字体设置为serif
的时候,不管是 中文 还是使用 unicode
字符都可以正常展示。其实是原理是这样的:
用浏览器打开页面时,浏览器会读取 HTML 文件进行解析渲染。当读到「松松」两个字时会转换成对应的 unicode码(可以认为是世界上任意一种文字的特定编号)。再根据HTML 里设置的 font-family (如果没设置则使用浏览器默认设置)去查找电脑里(如果有自定义字体@font-face ,则加载对应字体文件)对应字体的字体文件。找到文件后根据 unicode 码去查找绘制外形,找到后绘制到页面上。 所以对于第二个范例, 「ٷ」是「松」的 unicede 码,所以用户最终也能看到serf字体样式的「松」字。
也就是说,我们想让页面展示图标,就可以将图标的 unicode
添加进我们引入的字体库中,当我们在页面中使用 unicode
时,电脑会自动去查找引入字体库中对应 unicode
的外形描述,这样,图标也就展示在页面中了。
我们可以去iconfont (opens new window)找个字体图标试一试,注册一个 iconfont
的账号,然后选中图标加入购物车,添加到项目中,使用 iconfont
提供给你的在线链接,如我这里的 //at.alicdn.com/t/font_1490075_q8o5r5y54vk.css
,最后像下面这样用,就可以愉快的使用 iconfont
的图标了。这里两种字体都使用,是为了兼容不同的浏览器。
iconfont
提供好几种图标引入的方式,可以使用 unicode
和 类名引入
的方式。可以发现,使用 unicode
字符可读性不是很好,所以我们一般使用 类名引入
的方法。而 类名引入
靠的是 伪元素
。
所以对于在UI库中提供 图标引入 功能,我们算有点眉目了,无非是项目在需要用到的字体(包含图标的unicode字符)注册到电脑中,将提供的图标的 unicode
字符保存在项目中,最后使用类名(伪元素)的方式引入即可。
# 引入字体
这里保存的字体包含MSSUI
提供的图标 unicdoe 字符, MSSUI
保存字体的目录是 src/theme/fonts
,字体文件如下:
├── element-icons.ttf
└── element-icons.woff
2
这里的字体文件有两种格式,ttf
和 woff
。ttf
全称 TrueType Font
,这种字体是Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理,保证了屏幕与打印输出的一致性,但是缺点是容易被复制。woff
(Web开发字体格式)是一种专门为了Web而设计的字体格式标准,实际上是对于TrueType/OpenType等字体格式的封装,每个字体文件中含有字体以及针对字体的元数据(Metadata),字体文件被压缩,以便于网络传输。
# 定义图标的unicode
.ml-icon-ice-cream-round:before {
content: "\e6a0";
}
.ml-icon-ice-cream-square:before {
content: "\e6a3";
}
.ml-icon-lollipop:before {
content: "\e6a4";
}
.ml-icon-potato-strips:before {
content: "\e6a5";
}
// ...
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 注册字体
@font-face {
font-family: 'element-icons';
src: url('./fonts/element-icons.woff') format('woff'), /* chrome, firefox */
url('./fonts/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
font-weight: normal;
font-display: 'auto';
font-style: normal;
}
2
3
4
5
6
7
8
同时,为了保持 图标 的一致性,我们可以统一定义图标的基本样式,如:
[class^="ml-icon-"], [class*=" ml-icon-"] {
font-family: 'element-icons' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: baseline;
display: inline-block;
// 为了 font 更好的渲染
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
提示
font-smoothing
和 osx-smoothing
是为了使浏览器在渲染字体的时候,锯齿效果更轻一些 (opens new window)
最后就能愉快的使用图标了: