详解canvas绘制网络字体几种方法

什么是网络字体？

在网页中，有时我们需要使用一些特定的字体以符合设计需求。而这些字体是否能够在用户设备中正确显示就成了一个问题。如果用户没有该字体，则无法正确显示网页中的文字。因此，网络字体应运而生，它可以让设计者在网页中使用非系统自带字体，并且无须下载安装这些字体到用户设备中。

canvas绘制网络字体的优势

在使用网络字体的场景中，我们一般会选择使用CSS来实现。但在一些特殊要求下，使用canvas绘制网络字体会具有优势，比如：

字体延迟加载，不影响页面渲染
实现灵活，可自定义字体样式、颜色、动画等
支持高清绘制，适应不同分辨率屏幕

canvas绘制网络字体的几种方法

1. 使用canvas的font属性

canvas 元素可以使用 font 属性，来设置字体、大小和样式。如果此时设置的字体不是本地已有的字体，浏览器会自动从网络加载字体。

<canvas id="canvas"></canvas>

<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.font = 'normal 36px Impact';
ctx.fillStyle = 'red';
ctx.fillText('Hello, World!', 0, 40);
</script>

在上述代码中，Impact 字体并不是本地已安装的字体，它是一种网络字体，浏览器会自动从网络加载该字体。

2. 使用CSS @font-face规则

@font-face 规则可以告诉浏览器从网络加载指定的字体文件，以支持在 canvas 上绘制。这种方法相对来说更加灵活，可以设置更多的字体样式和属性。

@font-face{
    font-family: 'Myanmar MN';
    src: url('https://myanmarwebfont.com/Myanmar_MN.ttf');
}

canvas{
    font-family: 'Myanmar MN', sans-serif;
}

在上述代码中，@font-face 规则用于声明一个字体，而在 canvas 元素的 CSS 样式中使用该字体即可（类似于普通的CSS样式）。

这种方法不仅适用于 canvas，同样可以用于其他类型的HTML元素。