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

2. 如何正确把图标显示在指定的方框里？

具体看代码

　　　　

            ctx.save();
            var icon_font=this.icon.size+"px "+font.fontFamily;
            ctx.font=icon_font;
            ctx.strokeStyle=this.icon.color||"black";
            ctx.fillStyle=this.icon.color||"black";
            ctx.textBaseline="top";
            metrics=ctx.measureText(this.icon.text);    
            if(this.icon.fill)
                ctx.fillText(this.icon.text,(this.width-metrics.width)/2,this.margin);
            else
                ctx.strokeText(this.icon.text,(this.width-metrics.width)/2,this.margin);
            ctx.restore();     

关键在hightlight 的代码上，这样就可以保证字体正确显示在方框的中间，并保留margin 大小的距离。

 

由于Font awesome 的Unicode太多，太难记，我把它生成到Json 数据文件里。

需要的可以去下载， http://www.visor.com.cn/help/fontawesome4_3

我在使用的地方都是应用这些数据去做选择的。