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

83

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

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

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

javascript html canvas typography

— 里奇
source

154

您可以使用以下任何一种：

ctx.font = "italic 10pt Courier";

ctx.font = "bold 10pt Courier";

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

有关更多信息，这里有一些资源：

— 甜甜圈
source

2

Arg击败了我，+ 1了不起的网站提供了更多信息，diveintohtml5.org

— canvas.html＃divingin

@Loktar感谢您的链接，将其包含在答案中。

— 甜甜圈

关于下划线：stackoverflow.com/questions/4627133/...

— jedierikb

4

您还可以指定字体粗细：ctx.font = "400 10pt Courier"

— Ivan P

ctx.font = "400 10pt Open Sans"在最新版本的浏览器中，使用Calibri或Open Sans在Chrome中通过字体粗细对我不起作用

— sean2078

12

对于任何偶然发现此问题的人，请多加注意：确保遵循接受的答案中显示的顺序。

订购顺序错误时，我遇到了一些跨浏览器的问题。在Chrome中使用“ 10px Verdana粗体”字样，但在IE或Firefox中不起作用。按照指示将其切换为“粗体10px Verdana”，可以解决这些问题。如果您遇到类似的问题，请仔细检查订单。

— 陶道森
source

Chrome似乎已更改，因此与Firefox兼容。看到这支笔：codepen.io/anon/pen/BXNZxO

— ecc521 '19

2

因此，没有办法仅在一个JS命令中进行设置font-weight（或font-size或font-family...）吗？全部都必须使用一个完整的字体字符串吗？

— 乔纳森·图兹曼
source

1

下划线不可能通过任何canvas方法或属性来实现。但是我做了一些工作来完成它。您可以在@ http://scriptstock.wordpress.com/2012/06/12/html5-canvas-text-underline-workaround中查看

— 杜吉什
source