使用连字符创建图标字体

连字符字体图标时代已到来

图标一直以来都伴随着web页面的开发。最初我们直接使用图片，发现会导致大量的请求。为了减少这个现象我们使用CSS sprites也就是所谓的雪碧图，有些还用了文件缓存技术。后来我们把图标做成嵌入符号字体，嵌入符号字体就是将一些小图标移动到单个字体文件而不是一张图片上。这与CSS sprites具有相同的缓存和文件大小优势，以及高分辨率显示时更加平滑。不同大小的图标只需要定义font-size便可以，也让我们省了不少事情。现在我们更进一步各大浏览器（包括IE 11），支持了连字符字体（ligatures fonts）

字体图标简史

早期的符号字体

早期的符号字体将图形映射到ASCII范围内的字母。键入“w”将生成一个地球的图片，键入一个“m”，一个信封。这样，只需键入即可轻松查看字符到符号的转换。当字体嵌入失败时会出现问题，最后在随机的地方出现奇怪的字母，这些字母没有意义。例如:

<div><span class="icon">L</span> 下一步</div>

你只是想显示一个“箭头”和文本“下一步”，但是得到的是“L下一步”。

:before或者:after

这时候意识到需要把这个图标使用如：:before或者:after嵌入到标签中去。这样看起来就不会那么奇怪了。

Unicode中的私有区

Unicode中的私有区很好的解决了，字符与图标的冲突。此区域中的字形与字母表中任何字母的语义无关。如果字体不可用或未加载，则会出现一个空框而不是字母。

就只能如此了吗？

或许我们还可以更好一点。假如你的导航栏只有图标，那么搜索引擎将得不到有用的信息（或许你会跟我说这个不是问题，已经有办法解决了）今天我要告诉你一个更舒服的姿势?
我希望如下代码，

<ul>
	<li>Home</li>
	<li>Contact</li>
	<li>About</li>
	<li>Cart</li>
</ul>

渲染出来的是这样的：
这有可能吗？这当然可以使用连字符字体来定义就好了。

哇更舒服的姿势

1. 无需添加任何额外代码；
2. 完全语义化；
3. 良好的搜索引擎支持；
4. 等等
   废话就不多说了，Google’s Material Icons就是使用的连字符字体图标。大家伙可以去看看。Vuetify使用了material icons。接下来我们看看如何来制作这样的字体图标库。

连字符字体图标的制作

工具：icomoon(当然还有其它的工具可以用比方说免费的FontForge，尽管我不曾学会如何使用它?) iconmoom是个国外的网站，天国访问需要自配梯子。由于是英文的这里我稍作操作说明：

1. 新建图标集合
2. 上传图标，点击如下图所示按钮。
   选择自己的图标文件（注意这里只支持svg格式的图标），上传后应该会显示成这样：在列表中出现了你上传的图标。
3. 选择你需要使用的图标
4. 生成字体文件
   这样写，注意fi的设置
5. 下载字体文件
6. 解压压缩包，查看demo。在demo中有如何引用字体文件以及标准的css文件。
7. 根据上面的设置，我们就可以在html中这样写

<span>camera</span>
<span>delete</span>

然后就会得到这样的渲染结果
参考：
https://icomoon.io/app
https://vuetifyjs.com/zh-Hans/framework/icons
http://alistapart.com/article/the-era-of-symbol-fonts/
https://material.io/tools/icons/?style=baseline