使用html2canvas开发遇到的字体偏移问题

背景
我们经常会遇上动态生成海报的需求,而在Web前端中,生成图片非Canvas莫属。但是在实际工作当中,为了追求效率,我们会不可避免地去使用一些JS插件,而html2canvas.js就是一款优秀的插件,它可以轻松地帮你将HTML代码转换成Canvas,进而生成可保存分享的图片。实现了在客户端对网页进行截图的功 能,因为每个浏览器渲染页面的方式都不尽相同,所以生成的图片也不太一样。
 
它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时,将采用Flashcanvas或ExplorerCanvas技术代替实现。以下浏览器能够很好的支持该脚本:Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的浏览器。
 
官网:
https://github.com/niklasvh/html2canvas
https://github.com/omwteam/html2canvas
 
坑点及解决方案:
https://www.cnblogs.com/wangjishu/p/13292060.html
 
技术交流群:
https://www.cnblogs.com/padding1015/p/9225517.html
 
言归正传:
          在谷歌浏览器使用html2canvas对一个div截图,并生成图片,效果如下:左边为div,右边为生成的图片

 相信眼尖的小伙伴已看到端凝,这对于摩羯座这要求完美的人可是当头一棒,实属难受,调整样式很久,实在找不到样式上的问题,最后得一位贵人相助,说是字体的原因,这下终于找到路了,果然是字体的原因

姓名二字font-family为simhei(黑体),想了想是否是电脑自带的字体里没有simhei,打开电脑自带的字体查询,果然没有simhei,只有黑体-简、黑体-繁

故改为电脑自带的字体华文仿宋,然后奇迹般的好了,字体不下移了

虽说字体不下移了,但是每个用户电脑的字体不尽相同,名称也不相同,例如我的电脑里字体叫华文仿宋,小伙伴的电脑字体叫仿宋,我的电脑没有simhei,小伙伴有。。。

故采用终极解决办法,在项目里加入ttf字体文件 

方案请看下篇文章: vue引入外部字体

引入ttf字体后,一切正常,字体能正常显示,字体不下移,完美收官

引入了字体后,新的问题又来了,字体包都是以M为单位,大约5M ~ 10M,这对浏览器的加载速度会收到影响,字体包体积大的问题一直是前端的诟病

解决方案请看下篇文章:开启文件压缩

原文地址:https://www.cnblogs.com/caofeng11/p/13691270.html