博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
项目中引入特殊字体【小程序、h5】包括canvas画图
阅读量:5964 次
发布时间:2019-06-19

本文共 973 字,大约阅读时间需要 3 分钟。

请看清楚我虚线下面所有的话。

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




小程序和h5的页面展示特殊字体

有一个网站,叫。

里面随便找到一个你满意的文字,或者可以上传你要的文字,不过有些字体会有版权问题不能用,你自己上传特殊的上面没有的字体也行。

emmmmmm……提醒一下,如果你要自己上传字体的话,最好开个会员,然后加他们的官方号问一下,不然审核时间…………有点久。
然后用css引入会比较方便,按步骤我们来走一遍。

我随便找了一个

clipboard.png

这个字体不错
就这个了
点了立即使用然后进入下一个页面

clipboard.png

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

clipboard.png

生成!

clipboard.png

不好意思打个码,按照上面的方法走就是了。

这就是直接再页面上显示文字的办法

这个在h5和小程序上面都可以使用的,非常方便。

接下来就是画图了。

h5的canvas画图引入特殊字体

当时也看了不少文章,直接把4m的字体放入项目也做过,放在服务器上然后css引入也试了,手机上看都没啥用。

真是哭干了我的黄河泪。
后来还是有字库当了我的救星。
里面免费的那些字体我感觉够我用了【够我用有个屁用我又不是设计】

接下来我们看方法

先丢出

里面的意思就是,你先引入它的js,然后使用getFontFace的方法,注意!!!!

注意!!!!

画图一定要在

clipboard.png

成功返回之后调用,然后字体使用result.FontFamily这个返回的字体名就可以了。

应该不需要代码示范了吧。

小程序canvas画图引入特殊字体

啊这个,其实最开始的时候挺恶心的,因为他引入特殊字体还偶尔会报错,【怪小程序去】

现在好像问题不大,首先
首先!!!!把字体存到你的服务器上,随便丢那里都好,给个网络地址就行。
注意一下,iOS 仅支持 https 格式文件地址,所以地址要https。

引入就是用小程序的引入字体方法啦。

clipboard.png

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

转载地址:http://yqjax.baihongyu.com/

你可能感兴趣的文章
那年匆匆 -大学
查看>>
Internet 打印提示“打印机安装失败、打印机名称无效”的解决
查看>>
从Powershell ***脚本学到的如何执行后台runspace~
查看>>
SCCM TP4部署Office2013
查看>>
Linux系统启动过程,grub重装。
查看>>
使用Putty密钥认证机制远程登录Linux
查看>>
一不小心,老司机又翻车了
查看>>
理解思科IPS系统的traffic flow notifications
查看>>
50.本地VMware环境虚拟机的异地(Azure)容灾(上)
查看>>
【博客话题】技术人生之三界修炼
查看>>
Ext JS 6开发实例(三) :主界面设计
查看>>
SFB 项目经验-52-Outlook-2010/2013-连接Exchange 2016需要密码!
查看>>
Hyper-V 3中虚拟机CPU竞争机制
查看>>
雷军说小米综合净利润率永远不超过5%,玺哥相信他是真心的!
查看>>
在Emacs24下的Java环境(Cedet+Elib+JDEE+ECB)
查看>>
【原创】Oracle RAC原理和安装
查看>>
单IP无TMG拓扑Lync Server 2013:外部访问
查看>>
Node.js+Express商业开发中的安全性考虑
查看>>
Wijmo 更优美的jQuery UI部件集:运行时处理Wijmo GridView数据操作
查看>>
大数据实战之环境搭建(十)
查看>>