Question

我目前正在使用JavaScript和jQuery构建一个画布游戏。对于状态栏，我想使用名为＆＃34; pixelart.ttf＆＃34;的自定义字体。在index.html中，我添加了以下内容：

<style type="text/css">
    @font-face {
        font-family: pixelart;
        src: url(misc/pixelart.ttf);
    }
</style>

在所有脚本加载之前。画布也在此页面上。

这是应该使用字体绘制状态栏的代码：

context.fillStyle = 'rgba(25, 25, 25, 0.1)';
context.textBaseline = 'top';
context.font = fontSize + ' ' + fontName; // will become '25px pixelart'
context.fillText(currentText, 50, 50);

在Mac和iPhone上的Safari中，字体都能正常工作，而在所有其他浏览器上则不然。当我查看Chrome或Firefox中加载的资源时，字体就在那里，但它会显示另一种默认字体。

我尝试了一些东西。例如，在身体顶部添加它：

<div style"font-family: pixelart"></div>

但这也不起作用。

有什么建议吗？

Answer 1

除了.ttf之外，您还需要在.eot .woff2 .woff中添加字体才能使其正常运行。

css例子：

@font-face {
    font-family: 'yourFONT';
    src: url(/yourFont.eot');
    src: url('/yourFont.eot?#iefix') format('embedded-opentype'),
         url('/yourFont.woff2') format('woff2'),
         url('/yourFont.woff') format('woff'),
         url('/yourFont.ttf') format('truetype'),
         url('/yourFont.svg#yourFONT') format('svg');
    font-weight: normal;
    font-style: normal;
}

画布上的自定义字体仅适用于safari

1 个答案: