随笔- 24  文章- 3  评论- 11 
 

  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

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

 

 posted on 2015-04-21 10:13 沧海一声笑 阅读(...) 评论(...) 编辑 收藏