Question

我无法加载要在画布中使用的字体。我的字体文件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>

这确实加载了字体（在调试器/网络中），但未在画布上使用。如果我将src: url(OpenSans-Regular.ttf)替换为local('OpenSans-Regular.ttf')，它甚至不会加载到调试器/网络中。我尝试以两种方式添加/删除引号，尝试删除和添加.ttf。但是没有任何效果。

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

谢谢

Answer 1

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

您可以在丹尼尔·怀特提到的https://stackoverflow.com/a/7289880/864799

这个重复问题的答案中获得更多信息。

您可能要由同一维护者使用更新的FontFaceObserver来代替WebFontLoader。

例如：

<style>
@font-face {
    font-family: 'Example';
    src: url('Example-Regular.woff2') format('woff2');
}
</style>

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

<!-- You could also include this locally, but this is the latest version at the time of writing. -->
<script src="https://unpkg.com/fontfaceobserver@2.1.0/fontfaceobserver.standalone.js"></script>
<script>

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

var font = new FontFaceObserver('Example', {
  weight: 400
});

font.load().then(function () {
  console.log('Font is available');

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

}, function () {
  console.log('Font is not available');
});
</script>

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

无法将字体加载到画布

1 个答案: