Question

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

Answer 1

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，项目在https://github.com/Pomax/Font.js