javascript - 在不知道字体系列的情况下更改 Canvas 的字体大小

Question

有没有办法只更改 Canvas 上下文的字体大小而无需知道/编写字体系列。

 var ctx = document.getElementById("canvas").getContext("2d");

 ctx.font = '20px Arial'; //Need to speficy both size and family...     

注意:

ctx.fontSize = '12px'; //doesn't exist so won't work...
ctx.style.fontSize = '20 px' //doesn't exist so won't work... 
                         //we are changing the ctx, not the canvas itself

其他注意事项:我可以做类似的事情:检测“px”在哪里，删除“px”之前的内容并将其替换为我的字体大小。但如果可能的话，我想要比这更简单的东西。

Answer 1

这是一种更简单、更简洁的更改字体大小的方法，无论您是否使用 font-variant 或 font-weight，它都可以使用。

假设你的新字体大小是 12px

ctx.font = ctx.font.replace(/\d+px/, "12px");

如果你想增加 2 点，或者一个漂亮的衬垫:

ctx.font = ctx.font.replace(/\d+px/, (parseInt(ctx.font.match(/\d+px/)) + 2) + "px");