在Canvas文本上设置字体粗细

Question

我正在尝试使用Canvas元素在图像上书写文本。

我将字体粗细设置为900，但是在移动设备上却没有显示。

在台式机上还不错，甚至可以在响应模式下对其进行测试也不错，但是当我启用它时，手机上不会出现较重的字体粗细。

我尝试对Debug JS modifying some specific canvas element的注释中的代码段进行调试，但由于某种原因，我发现ctx.font仅存储字体大小和字体名称，而不存储字体粗细。 / p>

我添加了单词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);
}

Answer 1

Chrome和Safari要求还设置 font-style ，以便为 font-weight 使用数字值：

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>

Answer 2

我将字体粗细设置为900，但是在移动设备上却没有显示。

在台式机上很好，甚至可以在响应模式下对其进行测试 看起来很好

您可以检查该链接吗？我不确定是否与您的问题有关，但可以帮助您：https://www.w3schools.com/html/html_images_picture.asp