设置html画布字体

Question

我需要对画布上绘制的所有文本使用 Myriad Pro。我正在通过 CSS 加载字体，如下所示：

@font-face { font-family: MyriadProRegular; src: url('/fonts/MyriadPro-Regular.otf'); } 

并尝试像这样为我的画布设置它：

this.context.font = "16pt MyriadProRegular";

问题是没有分配字体 - 我的所有文本都正确绘制，但字体错误。不过，当我将“MyriadProRegular”更改为任何标准的网络字体时，Assingment 确实有效。

我已经尝试了这两个帖子的所有解决方案和建议： HTML 5 canvas font being ignored, External Font on HTML5 Canvas，但他们都没有帮助，而且这些旧帖子似乎不会有任何新的答案。

我知道我的 css 或字体本身没有问题 - 我的画布是在用户填写表单并推送开始后通过 JS 创建的，并且该表单使用 Myriad Pro 就可以了。

如何让画布使用我的字体？

Answer 1

我很确定您需要将字体文件上传到服务器。然后使用字体声明，它应该可以工作。