如何将 HTML5 canvas 文本设置为粗体和/或斜体？

Question

我以一种非常直接的方式将文本打印到画布上：

 var ctx = canvas.getContext('2d');
ctx.font = "10pt Courier";
ctx.fillText("Hello World", 100, 100);

但是如何将文本更改为粗体、斜体或两者兼而有之？有什么建议可以解决这个简单的例子吗？

原文由 Ritchie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

来自 CanvasRenderingContext2D.font 的 MDN 文档：

Canvas 2D API 的 CanvasRenderingContext2D.font 属性指定绘制文本时要使用的当前文本样式。该字符串使用与 CSS 字体 说明符相同的语法。

因此，这意味着以下任何一项都将起作用：

 ctx.font = "italic 10pt Courier";

ctx.font = "bold 10pt Courier";

ctx.font = "italic bold 10pt Courier";

以下是一些额外的资源以获取更多信息：

• 深入 HTML5
• HTML5 画布 - 基础知识

原文由 Donut 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于任何偶然发现此问题的人来说，只是一个额外的提醒：一定要遵循接受的答案中显示的顺序。

当我的顺序错误时，我遇到了一些跨浏览器问题。 “10px Verdana bold”在 Chrome 中有效，但在 IE 或 Firefox 中无效。按照指示将其切换为“粗体 10px Verdana”可解决这些问题。如果遇到类似问题，请仔细检查订单。

原文由 tddawson 发布，翻译遵循 CC BY-SA 3.0 许可协议