我正在尝试使用 Canvas 元素在图像上写入文本。
我已将字体粗细设置为 900,但在移动设备上它不显示。
在桌面上它很好,甚至在响应模式下测试它看起来也很好,但是当我让它上线时,较重的字体粗细不会在我的手机上出现。
我尝试了Debug JS modifying some specific canvas element评论中的代码片段调试它,我发现由于某种原因 ctx.font 只存储字体大小和字体名称,但不存储字体粗细。
我添加了“bold”一词,它会存储该词,但不会存储“bolder”或数字值。
有谁知道这里发生了什么吗?
我包含了一个代码片段和调试的屏幕截图,显示了它如何存储字体值。
function main() {
// Put template on canvas
ctx.drawImage(img, 0, 0, size, size);
ctx.font = "bold 110px 'Saira Condensed', sans-serif";
ctx.textAlign = "center";
ctx.fillStyle = "#ffffff";
ctx.fillText(number, 325, 290);
}
最佳答案
Chrome 和 Safari 还要求设置字体样式才能使用字体粗细的数值:
const canvas = document.querySelector( "canvas" );
const ctx = canvas.getContext( "2d" );
// add 'normal' font-style
ctx.font = "normal 900 24px Unknown, sans-serif";
ctx.fillText( "bold", 50, 50 );
ctx.font = "24px Unknown, sans-serif";
ctx.fillText( "normal", 150, 50 );
canvas { background: white }
<canvas></canvas>
关于javascript - 设置 Canvas 文本的字体粗细,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64583689/