如何在HTML5 Canvas 里面显示 Font Awesome 标

Font Awesome 是一套完美的图标字体,主要目的是和 Bootstrap 搭配使用. 提供的CSS 已经可以完美显示这些图标在网页里面。最新的版本4.3 里面，已经提供519 Icons。 这些图标广泛应用在web应用里面。如何在HTML5 Canvas 里去显示这些图标呢？经过一通学习，终于找到好的方案。 Font Awesome 是一套图标字库，提供了几种矢量字体

TTF或.OTF，适用于Firefox 、Safari、Opera

.EOT，适用于Internet Explorer 4.0+

.SVG，适用于Chrome、IPhone

.WOFF 知用于Chrome、Firefox

但它的内容是用Unicode 做编码的。在当字体显示的时候，我们要先获得图标的Unicode,基本思路是

1. 将Font Awesome 的字体文件拷贝到服务器的字体目录里面

2. 设置Canvas 的字体， ctx.font="12px fontawesome"

3. 调用Canvas API ctx.fillText(text,x,y). 这里text 就是 图标的Unicode。

结果显示的就是Unicode代表的图标了.

其他相关的技巧

1. 如果没有权限或者不想拷贝字体到服务器的字体目录里怎么办？

可以采用动态调用指定文件字体的方法。在程序里动态加载指定目录下的字体文件。

如果不知怎么做？可以使用Font.js，项目在/Pomax/Font.js