php 解析otf字体_「每日一题」聊一聊字体图标的实现原理

问题：

字体图标如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;
}