聊一聊字体图标的实现原理

Date: 2017-06-23 Posted by: 小谷同学 In: 技术文章

问题:

字体图标如iconfont、 font-awesome、fontello,大家或多或少都使用过,那么问题来了?字体图标的实现原理是怎样的?

解答:

了解字体图标前我们先了解下字体。一个简单的例子

<p>Hello 饥人谷</p>
<style>
p{
  font-family: serif;
}
</style>

大家应该都知道这几行代码是什么意思——把 p 标签里的内容设置为字体 serif,此时页面上段落里的内容就以该字体的样式去展示。这里有个问题,为什么字体设置为 serif 页面展示的文字是 serif 的样式,设置成微软雅黑就展示成微软雅黑的外形呢?
回答这个问题前,先看下面一个例子

<p>Hello &#x9965; &#x4eba;&#x8c37;</p>
<style>
p{
  font-family: serif;
}  

这里把「饥人谷」这几个字改为 unicode 编码,此时页面上仍然能以serif 字体展示「饥人谷」三个字。

先做个总结:使用浏览器打开页面时,浏览器会读取 HTML 文件进行解析渲染。当读到「饥人谷」三个字时会转换成对应的 unicode码(可以认为是世界上任意一种文字的特定编号)。再根据HTML 里设置的 font-family (如果没设置则使用浏览器默认设置)去查找电脑里(如果有自定义字体@font-face ,则加载对应字体文件)对应字体的字体文件。找到文件后根据 unicode 码去查找绘制外形,找到后绘制到页面上。 所以对于第二个范例, 「&#9965」是「饥」的 unicede 码,所以用户最终也能看到serf字体样式的「饥」字。

那如何让页面展示一个图标呢?我们可以把图标当成文字来操作,步骤如下:

  1. 在页面上放入该图标的 unicode 码 (可以自己创建一个)
  2. 让该元素使用我们自定义的字体
  3. 字体对应着我们自己创建的字体库文件
  4. 字体库文件里有关于该 unicode 码的外形描述

这里我们参考 iconfont 的使用,和上面的步骤对应起来。




下面是具体用法范例,大家可以一试: 饥人谷JS Bin

<span class="icon">&#xe600;</span>
<style>
@font-face {
  font-family: 'iconfont';
  src:url('http://at.alicdn.com/t/font_1475388520_7015634.ttf') format('truetype')
}

.icon{
  font-family: iconfont;
}  
</style>

这时候我们会发现「」这个标记可读性太差了,用起来很不方便。我们可以使用伪元素来填这个坑,换汤不换药,这样就可以直接在HTML 中使用一个标签加一个 class 来代替这个图标。这里注意 CSS的:before里对 unicode 的写法和HTML 中写法上的区别:

<span class="icon-qq"></span>
<style>
@font-face {
  font-family: "hello";
  src: url('//at.alicdn.com/t/font_1475388520_7015634.ttf') format('truetype')
}
.icon-qq:before { font-family:"hello";content: "\e600"; } 
</style>

大家可以在翻翻 font-awesome 以及其他字体图标库,原理类似。

作者:若愚

One thought on “聊一聊字体图标的实现原理

发表评论

电子邮件地址不会被公开。