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

问题:

字体图标如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 以及其他字体图标库,原理类似。

作者:若愚

39 thoughts on “聊一聊字体图标的实现原理”

  1. Hey would you mind letting me know which hosting company you’re working with? I’ve loaded your blog in 3 different web browsers and I must say this blog loads a lot quicker then most. Can you recommend a good web hosting provider at a honest price? Many thanks, I appreciate it!|

  2. Hello everyone, it’s my first pay a quick visit at this web page, and piece of writing is really fruitful in favor of me, keep up posting these types of posts.|

  3. Great goods from you, man. I’ve understand your stuff previous to and you are just too fantastic. I really like what you’ve acquired here, really like what you’re saying and the way in which you say it. You make it entertaining and you still take care of to keep it smart. I can not wait to read much more from you. This is actually a terrific web site.|

  4. Wow! Finally I got a weblog from where I know how to in fact obtain valuable information concerning my study and knowledge.|

  5. It’s really a nice and helpful piece of information. I’m glad that you shared this useful information with us. Please stay us up to date like this. Thanks for sharing.|

  6. May I simply say what a comfort to uncover someone who genuinely understands what they’re discussing on the web. You actually realize how to bring an issue to light and make it important. A lot more people have to check this out and understand this side of the story. I was surprised you aren’t more popular given that you definitely possess the gift.|

  7. An impressive share! I’ve just forwarded this onto a co-worker who has been doing a little research on this. And he in fact ordered me lunch because I found it for him… lol. So let me reword this…. Thanks for the meal!! But yeah, thanks for spending time to talk about this matter here on your internet site.|

  8. Whats up this is somewhat of off topic but I was wanting to know if blogs use WYSIWYG editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding knowledge so I wanted to get advice from someone with experience. Any help would be greatly appreciated!|

  9. Hey there! This is my first visit to your blog! We are a group of volunteers and starting a new initiative in a community in the same niche. Your blog provided us beneficial information to work on. You have done a marvellous job!|

  10. I’m not that much of a internet reader to be honest but your sites really nice, keep it up! I’ll go ahead and bookmark your site to come back in the future. Cheers|

  11. You have made some decent points there. I looked on the internet to learn more about the issue and found most individuals will go along with your views on this site.|

  12. Hey there just wanted to give you a quick heads up. The text in your content seem to be running off the screen in Chrome. I’m not sure if this is a formatting issue or something to do with web browser compatibility but I thought I’d post to let you know. The layout look great though! Hope you get the problem solved soon. Cheers|

  13. Hey there are using WordPress for your site platform? I’m new to the blog world but I’m trying to get started and set up my own. Do you need any coding knowledge to make your own blog? Any help would be greatly appreciated!|

  14. Heya this is somewhat of off topic but I was wondering if blogs use WYSIWYG editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding experience so I wanted to get advice from someone with experience. Any help would be enormously appreciated!|

  15. You actually make it seem so easy with your presentation but I find this matter to be really something that I think I would never understand. It seems too complex and very broad for me. I am looking forward for your next post, I’ll try to get the hang of it!|

  16. Hello, i read your blog from time to time and i own a similar one and i was just curious if you get a lot of spam comments? If so how do you reduce it, any plugin or anything you can advise? I get so much lately it’s driving me insane so any support is very much appreciated.|

发表评论

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