document.getElementsByTagName('head')[0].appendChild(link)
var image = document.createElement('img')
image.src = link.href
image.onerror = () => {
ctx.font = '50px "Vast Shadow"'
ctx.textBaseline = 'top'
ctx.fillText('123', 20, 10)
}
这个方案存在一点问题，当image onerror事件触发的时候，并不能保证字体已经加载完成，只能保证css文件已经加载完成，因此，在第一次访问的时候并不会生效：
但是你再刷新一下浏览器之后字体就生效了：
这是什么原因呢？我们来看一下刷新浏览器的网络请求：
可以看到后面的字体走的是缓存，因此可以字体可以绘制出来，但是如果将chrome调试的Disable cache勾选上，将缓存禁用掉，那么无论怎么刷新，字体都不会绘制出来。
有解决办法吗？答案是有的，使用Font Load API进行加载，来看具体代码：
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
var link = document.createElement('link')
link.rel = 'stylesheet'
link.type = 'text/css'
link.href = 'http://fonts.googleapis.com/css?family=Vast+Shadow'
document.getElementsByTagName('head')[0].appendChild(link)
var image = document.createElement('img')
image.src = link.href
image.onerror = () => {
document.fonts.load('50px Vast Shadow', '123').then(() => {
ctx.font = '50px "Vast Shadow"'
ctx.textBaseline = 'top'
ctx.fillText('123', 20, 10)
})
}
先用image的onerror事件trick css文件的加载，然后调用document.fonts.load看字体是否加载完成，这样就可以准确监听到字体加载完成，但是这个api存在兼容性问题，来看具体表格：
想要对这个api了解更多，可以前往 mdn 查看
对比绘制
对比绘制是什么意思呢？就是先设置一个没有的字体，然后在设置我们需要的字体进行对比，来看具体代码：
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
var link = document.createElement('link')
link.rel = 'stylesheet'
link.type = 'text/css'
link.href = 'http://fonts.googleapis.com/css?family=Vast+Shadow'
document.getElementsByTagName('head')[0].appendChild(link)
ctx.font = '50px UNKNOW'
ctx.textBaseline = 'top'
ctx.fillText('123', 20, 10)
var dataDefault = ctx.getImageData(20, 10, 50, 50).data
