如何将 HTML5 画布文本设置为粗体和/或斜体？
我正在以一种非常直接的方式将文本打印到画布上：
var ctx = canvas.getContext('2d');
ctx.font = "10pt Courier";
ctx.fillText("Hello World", 100, 100);
但是如何将文本更改为粗体、斜体或两者兼而有之？有什么建议可以解决这个简单的例子吗？
从 MDN documentation on CanvasRenderingContext2D.font：
Canvas 2D API 的 CanvasRenderingContext2D.font 属性指定绘制文本时要使用的当前文本样式。此字符串使用与 CSS 字体说明符相同的语法。
因此，这意味着以下任何一项都将起作用：
ctx.font = "italic 10pt Courier";
ctx.font = "bold 10pt Courier";
ctx.font = "italic bold 10pt Courier";
以下是一些额外的资源以获取更多信息：
深入了解 HTML5
HTML5 画布 - 基础知识
对于任何偶然发现这一点的人来说，请注意：请务必遵循已接受答案中显示的顺序。
当我有错误的顺序时，我遇到了一些跨浏览器问题。 “10px Verdana bold”在 Chrome 中有效，但在 IE 或 Firefox 中无效。将其切换为“bold 10px Verdana”，如所示解决了这些问题。如果遇到类似问题，请仔细检查订单。
下划线是不可能通过任何画布方法或属性。但我做了一些工作来完成它。您可以查看@http://scriptstock.wordpress.com/2012/06/12/html5-canvas-text-underline-workaround
您可以在此处找到实施http://jsfiddle.net/durgesh0000/KabZG/
如果您需要允许格式变化，您可以设置字体样式、绘制文本、使用 measureText 测量它、设置新样式，然后像这样绘制下一个块：
// 获取画布/上下文 var can = document.getElementById('my-canvas'); var ctx = can.getContext('2d') // 绘制第一个文本 var text = '99%'; ctx.font = '粗体 12pt Courier'; ctx.fillText(文本, 50, 50); // 测量文本 var textWidth = ctx.measureText(text).width; // 绘制第二个文本 ctx.font = 'normal 12pt Courier'; ctx.fillText('不可见', 50 + textWidth, 50);
延伸阅读
MDN > 画布 > 绘图文本
用斜体格式化单个单词
ctx.font = "400 10pt Courier"ctx.font = "400 10pt Open Sans"的字体粗细对我不起作用