画布不会用黄玉字体呈现反斜杠和其他字符
画布不会用黄玉字体呈现反斜杠和其他字符
提问于 2022-08-24 13:54:22
从没想过我会想出新的“堆叠溢出”的东西，但我们到了。如果这已经有了一个解决办法，那么请随时指点我的方向。我正在开发这个以Amiga工作台为模型的交互式桌面环境，当然，我也会加入黄玉字体。但事情是这样的。文本和符号，如隐藏，逗号和点绘制时，正确显示通过画布API，但像版权标志或反斜杠，例如，不显示。
我想我使用的字体可能不包括版权标志，但这让我觉得很奇怪。为什么要费劲地做一个字体，然后忽略几个符号，对吗？如果你打开字体与字型，你会清楚地看到，它与一系列异国情调的其他东西在那里。
从这个集合来看，也排除了独角兽之间的混淆。我在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>
但不知怎么在这里起作用了..。
关于字体和画布API有什么东西(我显然不知道)会导致这种行为吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-08-25 01:32:33
如果您得到一个替换字符(U+FFFD)，这意味着它不是字体问题，否则您将退回到另一种字体，而不是在替换的字形上。相反，这意味着您的问题是编码问题。
我不知道您的文档是用什么字符集声明的，我也不知道您的html文件是用什么字符集编码的，但显然存在不匹配。
如果两者都将html页面保存为UTF-8，并在文档的开头添加一个<meta charset="utf-8">，则您的字形将正确呈现，就像在代码段中所做的那样。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73474438
复制相关文章
相似问题
腾讯云开发者
