HTML5 Canvas 上的外部字体

Question

我完全不知道如何更改在画布上绘制文本时使用的字体。以下是我在 CSS 中定义的字体：

 @font-face{
 font-family:"Officina";
 src:url(OfficinaSansStd-Book.otf);
}

现在在我的 HTML/JavaScript 中我很想说：

 context.font = '30px "Officina"';

但这不起作用。如果我使用网络可用字体（如 Arial），它工作正常，当我直接将纯文本直接写入网页时，Officina 字体显示正常。我错过了什么？

原文由 cryptic_star 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对于大约从 2017 年开始提出这个问题的人，最好使用由 Google 和 Typekit 联合制作的 Web 字体加载器，位于此处：- https://github.com/typekit/webfontloader

原文由 JoeManFoo 发布，翻译遵循 CC BY-SA 3.0 许可协议