canvas使用ttf字体的正确方法

一、问题描述

最近在写前端项目，有一个页面是背景图+文字格式的，其中，背景图是用canvas里的ctx.drawImage实现的，大概如下：

//这个找的是当前vue页面同级的img文件夹里的png图片
import Ver1 from './img/certificate1@1.5x.png'

const img = new Image()
img.src = Ver1

……
//其它省略，总之是先用这个方法画了背景图
ctx.drawImage(img, 0, 0, 1125, 1530)

然后，图片上层的文字，也是用canvas画上去的，大概如下：

//获得canvas对象
const cvs = document.querySelector('canvas')
const ctx = cvs.getContext('2d')

//设置字体
ctx.font = 'bold 50px 楷体'
//设置文字居中
ctx.textAlign = 'center'
//把文字画上去，这个是文字坐标
ctx.fillText('小明', 300, 600)

这种方法可以实现动态设置背景图以及背景图上面的文字。

其中，遇到了几个问题：

1.canvas里设置了字体是bold 50px 楷体，这个设置在pc端用chrome自测时，是没有问题的；但是在app上访问这个页面，发现楷体设置没有生效，默认显示为了黑体。

2.应该是app上没有这个字体库，于是，准备使用ttf字体文件；但是百度发现，大部分教程都是css中使用ttf字体，没有canvas使用ttf字体的方法。

3.找了半天，终于找到了canvas中使用ttf的方法，在此总结下。

二、canvas使用ttf字体的方法

1.先下载一个ttf字体，例如楷体_GB2312.ttf
2.写一个css文件，例如font.css

@font-face{
    font-family:"楷体_GB2312";
    src: url("./楷体_GB2312.ttf");
}

3.把这2个文件放到某个位置，例如：

项目名\src\components\certificate\font\font.css
项目名\src\components\certificate\font\楷体_GB2312.ttf

4.准备修改使用canvas的vue文件certificate.vue，本人的vue文件位置为：

项目名\src\components\certificate\certificate.vue

其中，使用canvas的代码可以这样写：

            //创建一个FontFace对象，参数是字体名称和字体位置
            const myFont = new FontFace('myFont', 'url(./static/fonts/楷体_GB2312.8a1e9fe.ttf)')
            myFont.load().then(font => {
               document.fonts.add(font) 
            }).then(() => {
                //获得canvas对象
                const cvs = document.querySelector('canvas')
                const ctx = cvs.getContext('2d')

                //设置字体，这个就是FontFace方法中写的名字
                ctx.font = 'bold 50px myFont'
                //设置文字居中
                ctx.textAlign = 'center'
                //把文字画上去，这个是文字坐标
                ctx.fillText('小明', 300, 600)
            })

5.还需要在vue的style里加一个：(这样打包才会打进去这个字体文件)

<style lang="stylus" scoped>
@import url('./font/font.css');
</style>

6.这样，canvas就可以使用ttf文件给文字设置字体了。

7.需要注意， new FontFace('myFont', 'url(./static/fonts/楷体_GB2312.8a1e9fe.ttf)')这个方法中，如果写成new FontFace('myFont', 'url(./font/楷体_GB2312.ttf)')是不可以的、会报错404（不知道为什么相对路径不能用）；

因此，本人是先把前端项目打包，然后发现楷体_GB2312.ttf文件的真实路径是项目名/dist/static/fonts/楷体_GB2312.8a1e9fe.ttf，于是用new FontFace('myFont', 'url(./static/fonts/楷体_GB2312.8a1e9fe.ttf)')，才可以正常使用的。

三、备注

1.canvas中的new FontFace()方法的url参数，这个还不知道怎么写相对路径，目前是通过打包得到ttf文件的真实路径才写出来的。

1.5也许可以用这个方法实现使用相对路径：

import myfont from './font/楷体_GB2312.ttf'

new FontFace('myFont', 'url('+myfont+')')

【已测试，这个方法可以用，其实用这个方法合理些，是相对路径。】

2.css中使用ttf字体的方法简要总结：
(1)下载一个ttf字体，放到项目中
(2)创建一个font.css文件，放到项目中，例如与ttf字体同一个路径：

@font-face {
  /* 重命名字体名 */
  font-family: 'myfont';
  /* 引入字体，因为是同级,可以这样写 */
  src: url('./苹方字体.ttf');
  font-weight: normal;
  font-style: normal;
}

(3)页面中引入css文件(这个页面的位置/font/font.css，就可以引入这个css)：

<style lang="stylus" scoped>
 @import url('./font/font.css');
 
.myfont
    font-family myfont
 </style>

(4)页面中就可以使用这个字体了，例如：

<div :class="myfont">abc</div>