canvas使用ttf字体的正确方法

ゝ一纸荒年。 2024-03-16 23:50 53阅读 0赞

## 一、问题描述 ##

最近在写前端项目，有一个页面是`背景图+文字`格式的，其中，背景图是用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里加一个：(这样打包才会打进去这个字体文件)

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)：

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