Canvas不使用Topaz字体渲染反斜杠和其他字符

Question

从未想过我会在Stack Overflow上想出一些新东西，但现在我们来了。如果这已经有了解决方案，请随时向我指出。我正在这个以Amiga Workbench为模型的交互式桌面环境中工作，当然我会加入Topaz字体的再创造。事情是这样的。当通过Canvas API绘制时，文本和符号(如分隔符、逗号和点(会正确显示，但版权符号或反斜线等符号则不会显示。

版权标志未正确显示的Amiga Workbench屏幕

我想我使用的字体可能不包括版权标志，但这让我觉得很奇怪。为什么要麻烦地制作一个字体，然后省略几个符号？如果你用font Forge打开字体，你会清楚地看到它和一系列异国情调的其他东西在一起。

Font Forge显示保存在字体数据中的一组标志

查看该集合还排除了unicode之间存在混淆的可能性。我在Gimp中使用了相同的字体，在那里我制作了一个视觉模型/原型，版权标志显示出来没有问题。这排除了任何键盘布局的恶作剧，对吧？

版权标志正确显示的Gimp屏幕截图

剩下的只有我的代码，我想这是没有问题的。以下是我如何编织字体和绘制文本：

const amigaFont = new FontFace(
'Topaz A1200',
'url(./media/font/Topaz_a1200_v1.0.ttf)'
);
amigaFont.load().then(function (font) {
document.fonts.add(amigaFont);
});
// between here is code that essentially waits for all media to have
// loaded like images and including the font before it is
// used to draw text, setting up the canvas etc...
const splashScreenText = [
'AMIGA ROM Operating System and Libraries',
'Copyright © 1985-1992 Commodore-Amiga, Inc.',
'All Rights Reserved.',
'1>'
];
let fontSize = Math.round(amigaDOSwindow.bottom * (24 / 356));
ctx.font = fontSize.toString() + 'px Topaz A1200';
textCursor.x = amigaDOSinput.left;
textCursor.y = amigaDOSinput.top + fontSize;
for (let index = 0; index < splashScreenText.length; index++) {
ctx.fillText(splashScreenText[index], textCursor.x, textCursor.y);
textCursor.y += fontSize;
}

编辑：我被要求分享再现问题的可运行代码：

const mediaCount = 1;
const mediaArray = [];
const mediaManager = setInterval(checkArray, 15);
function checkArray() {
switch (true) {
case mediaArray.length == mediaCount:
clearInterval(mediaManager);
initCanvas();
break;
default:
break;
}
}
const amigaFont = new FontFace(
'Topaz A1200',
'url(https://cdn.jsdelivr.net/gh/rewtnull/amigafonts@master/ttf/Topaz_a1200_v1.0.ttf)'
);
amigaFont.load().then(function (font) {
document.fonts.add(amigaFont);
mediaArray.push(amigaFont);
});
const splashScreenText = [
'AMIGA ROM Operating System and Libraries',
'Copyright © 1985-1992 Commodore-Amiga, Inc.',
'All Rights Reserved.',
'1>'
];
const textCursor = {
x: 0,
y: 0,
};
function initCanvas() {
let canvas = document.createElement('canvas');
canvas.id = 'canvas';
document.body.appendChild(canvas);
processCanvas();
}
function processCanvas() {
let canvas = document.getElementById('canvas');
canvas.width = 320;
canvas.height = 180;
drawText();
}
function drawText() {
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let fontSize = 32;
ctx.font = fontSize.toString() + 'px Topaz A1200';
textCursor.x = 0;
textCursor.y = 0 + fontSize;
for (let i = 0; i < splashScreenText.length; i++) {
ctx.fillText(splashScreenText[i], textCursor.x, textCursor.y);
textCursor.y += fontSize;
}
}

<canvas id="canvas"></canvas>

但不知怎么的，它在这里起作用。。。

字体和Canvas API是否存在可能导致这种行为的内容(我显然不知道(？

Answer 1

如果你得到了一个替换字符(U+FFFD(，这意味着这不是字体问题，否则你会回退到另一种字体，而不是替换字形上。相反，这意味着您的问题是一个编码问题。

我不知道文档是用什么字符集声明的，也不知道html文件是用什么代码集编码的，但显然存在不匹配
如果同时将html页面保存为UTF-8，并在文档头中添加<meta charset="utf-8">，则字形将正确呈现，就像在代码段中一样。