我需要使用自定义字体并将其呈现在屏幕外的画布上，虽然我已经做到了，但是我无法设置字体呈现的大小-结果只能是很小的呈现。
我见过的所有资源，包括w3schools.com，developer.mozilla.org等，都天真地假设我们都使用系统字体，并以草的方式定义大小，并与字体名称混合为：ctx.font =“ 30px Arial”;
事实是，̶如果我使用这个名字我自定义的字体文件放在同一个文件夹̶（̶“̶c̶u̶s̶t̶o̶m̶.̶w̶o̶f̶f̶”̶）̶̶（或.otf）的̶它的工作原理，̶但如果我添加大小以像素或点（“ 30px custom.woff”）无效！
令人沮丧的是，其他参数（如字体粗细）似乎是单独定义的（谈论令人难以置信的HTML5不一致使人想起过去）。因此，是否有办法更改用JS创建的屏幕外画布的自定义字体的呈现大小？
我这样创建屏幕外画布：
var offScreenCanvas = document.createElement('canvas');
offScreenCanvas.width = 256;
offScreenCanvas.height = 256;
var ctx = offScreenCanvas.getContext("2d");
稍后，我将字体渲染如下：
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.font = 'custom.woff';
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, offScreenCanvas.width, 256);
ctx.fillStyle = 'black';
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(txt, offScreenCanvas.width / 2, offScreenCanvas.height / 2);
然后，我对该渲染进行纹理处理，并在three.js表面上使用它。
three.js r96.0
jsfiddle上的字体替换（请参阅评论）：
最佳答案
您可以创建CSS字体规则并根据需要命名。然后，您可以使用自己的名字。
<style>
@font-face {
font-family: 'myfontname';
src: url('custom.woff');
}
</style>
然后在您的脚本中
ctx.font = '30px myfontname';
如果您说的那样可以与传递字体文件一起使用，请尝试
ctx.font = "fontfile.woff";
// most likely you need to wait/check that the font has loaded first and then
ctx.font = ctx.font.replace('(\d+)px', "20px");