项目中引入特殊字体【小程序、h5】包括canvas画图

41次阅读

共计 937 个字符,预计需要花费 3 分钟才能阅读完成。

请看清楚我虚线下面所有的话。横线上的废话随便你看不看。说实话这个字体已经把我折腾的死去活来了一段时间,而且我们项目还经常要画分享图去刷朋友圈,默认字体没办法达到设计的那种效果,查了不少资料,也自己摸索了半天,最后终于找到了救星。废话不多说,其实并不难。而且找到的这个有帮助的网站很多免费可以用的字体,如果没有特殊需求可以不需要花钱。

小程序和 h5 的页面展示特殊字体
有一个网站,叫有字库。
里面随便找到一个你满意的文字,或者可以上传你要的文字,不过有些字体会有版权问题不能用,你自己上传特殊的上面没有的字体也行。emmmmmm……提醒一下,如果你要自己上传字体的话,最好开个会员,然后加他们的官方号问一下,不然审核时间…………有点久。然后用 css 引入会比较方便,按步骤我们来走一遍。
我随便找了一个
这个字体不错就这个了点了立即使用然后进入下一个页面

点左边的这个 css 模式,会让你输入所有你需要的文字,不要有重复的哦~~~

生成!

不好意思打个码,按照上面的方法走就是了。这就是直接再页面上显示文字的办法
这个在 h5 和小程序上面都可以使用的,非常方便。
接下来就是画图了。
h5 的 canvas 画图引入特殊字体
当时也看了不少文章,直接把 4m 的字体放入项目也做过,放在服务器上然后 css 引入也试了,手机上看都没啥用。真是哭干了我的黄河泪。后来还是有字库当了我的救星。里面免费的那些字体我感觉够我用了【够我用有个屁用我又不是设计】
接下来我们看方法先丢出文档
里面的意思就是,你先引入它的 js,然后使用 getFontFace 的方法,注意!!!!
注意!!!!
画图一定要在

成功返回之后调用,然后字体使用 result.FontFamily 这个返回的字体名就可以了。
应该不需要代码示范了吧。
小程序 canvas 画图引入特殊字体
啊这个,其实最开始的时候挺恶心的,因为他引入特殊字体还偶尔会报错,【怪小程序去】现在好像问题不大,首先首先!!!!把字体存到你的服务器上,随便丢那里都好,给个网络地址就行。注意一下,iOS 仅支持 https 格式文件地址,所以地址要 https。
引入就是用小程序的引入字体方法啦。

同样还是跟之前一样,canvas 的画图需要在 success 的方法里面进行,不然不能保证字体加载完成你就开始画图了。

正文完
 0