javascript 在不知道字体系列的情况下更改 Canvas 的字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18092753/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change font size of Canvas without knowing font family
提问by RainingChain
Is there a way to only change the font size of a canvas context without having to know/write the font family.
有没有办法只更改画布上下文的字体大小而不必知道/编写字体系列。
var ctx = document.getElementById("canvas").getContext("2d");
ctx.font = '20px Arial'; //Need to speficy both size and family...
Note:
笔记：
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
Other note: I could do something like: detect where 'px' is, remove what's before 'px' and replace it by my font size. But I'd like something easier than that if possible.
其他注意事项：我可以执行以下操作：检测“px”的位置，删除“px”之前的内容并将其替换为我的字体大小。但如果可能的话，我想要比这更容易的事情。
采纳答案by MacroMan
Update: (from comments) There is no way around specifying font. The Canvas' font is modeled after the short-hand version of font in CSS.
更新：（来自评论）无法指定字体。Canvas 的字体仿照 CSS 中字体的简写版本。
However, there is always a font set on the canvas (or a font type) so what you can do is to first extract the current font by using it like this:
但是，画布上总是有一个字体集（或字体类型），所以你可以做的是首先像这样使用它来提取当前字体：
var cFont = ctx.font;
Then replace size arguments and set it back (note that there might be a style parameter there as well).
然后替换 size 参数并将其设置回原处（请注意，那里可能还有一个样式参数）。
A simple split for the sake of example:
为示例起见的简单拆分：
var fontArgs = ctx.font.split(' ');
var newSize = '12px';
ctx.font = newSize + ' ' + fontArgs[fontArgs.length - 1]; /// using the last part
You will need support for style if needed (IIRC it comes first if used). Notice that font-size is fourth parameter, so this will not work if you will have/not have font-variant(bold,italic,oblique), font-variant(normal, small-caps) and font-weight(bold etc).
如果需要，您将需要对样式的支持（如果使用 IIRC，它首先出现）。注意 font-size 是第四个参数，所以如果你有/没有 font-variant(bold,italic,oblique), font-variant(normal, small-caps) 和 font-weight(bold etc) 这将不起作用.
回答by MacroMan
Here is an easier and cleaner way of changing the font size that will work regardless if you are using font-variant or font-weight or not.
这是一种更简单、更清晰的更改字体大小的方法，无论您是否使用 font-variant 或 font-weight 都可以使用。
Assuming your new font size is 12px
假设你的新字体大小是 12px
ctx.font = ctx.font.replace(/\d+px/, "12px");
Or a nice one liner if you want to increase by 2 points:
如果你想增加 2 分，或者一个不错的单线：
ctx.font = ctx.font.replace(/\d+px/, (parseInt(ctx.font.match(/\d+px/)) + 2) + "px");
回答by StackSlave
To correctly answer your question, there is no way to change the font size of a canvas context without having to know/write the font family.
要正确回答您的问题，无需知道/编写字体系列，就无法更改画布上下文的字体大小。
回答by Oscarlito Allentot
try this (using jquery):
试试这个（使用jquery）：
var span = $('<span/>').css('font', context.font).css('visibility', 'hidden');
$('body').append(span);
span[0].style.fontWeight = 'bold';
span[0].style.fontSize = '12px';
//add more style here.
var font = span[0].style.font;
span.remove();
return font;
回答by user5480949
A cleaner way to not worry about scraping every other parameter:
一种不用担心刮除所有其他参数的更干净的方法：
canvas.style.font = canvas.getContext("2d").font;
canvas.style.fontSize = newVal + "px";
canvas.getContext("2d").font = canvas.style.font;
