Html 无法将字体加载到画布

我无法加载要在画布中使用的字体。我的字体文件

OpenSans Regular.ttf

与html位于同一文件夹中

<style>
@font-face {
    font-family: 'OpenSans';
    src: url(OpenSans-Regular.ttf) format("truetype");
}
</style>

<canvas id="c" width="1000" height="1400"></canvas>


<script>

var c = document.getElementById("c").getContext('2d');

c.font = '100px OpenSans';
c.fillText('Loading...', 110, 110);

</script>

@字体{
字体系列：“OpenSans”；
src:url（OpenSans Regular.ttf）格式（“truetype”）；
}
var c=document.getElementById（“c”）.getContext（“2d”）；
c、 字体='100px OpenSans'；
c、 fillText（'Loading…'，110，110）；

这会加载字体（在调试器/网络中），但不会在画布上使用。如果我将

src:url（OpenSans-Regular.ttf）

替换为

local（'OpenSans-Regular.ttf'）

它甚至不会在调试器/网络中加载。我尝试以两种方式添加/删除引号，尝试删除并添加.ttf。但什么都没用

注意：我做了一些尝试，我确信字体已正确加载，并且可以在其他元素中使用它

---

谢谢

如果在调试器中看到字体文件，则画布代码可能在加载字体之前运行

丹尼尔·怀特（Daniel White）提到的可能重复问题的答案中，您可以阅读更多内容：

与WebFontLoader不同，您可能希望使用由同一维护人员提供的较新版本

例如：

@字体{
字体系列：“示例”；
src:url（'Example-Regular.woff2'）格式（'woff2'）；
}
var c=document.getElementById（“c”）.getContext（“2d”）；
var font=新的FontFaceObserver（'示例'{
体重：400
});
font.load（）.then（函数（）{
console.log（“字体可用”）；
c、 字体='100px示例'；
c、 fillText（'Loading…'，110，110）；
}，函数（）{
console.log（'字体不可用'）；
});

您可以在中找到更详细的示例。

可能重复的