Question

我需要使用自定义字体并将其呈现在屏幕外的画布上，虽然我已经做到了，但是我无法设置字体呈现的大小-结果是很小的呈现。

我见过的所有资源，包括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上的字体替换（请参阅注释）：

Answer 1

您可以创建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");

Answer 2

由于我要先在JS中创建屏幕外画布，而不必先在HTML中对其进行预定义，因为我要从画布上的各种字体渲染中创建许多纹理，并且要使用自定义字体放置在文件夹上而不是加载Google字体，没有任何建议的解决方案可以正常工作，但是discourse.threejs.org的 Gabriele Petrioli 和 Mugen87 都起到了很大作用。

因此，它最终可以在Firefox，Chrome和Opera上正常运行。 IE11毫无疑问，因为它仍然不支持所有Three.js功能，所以我根本没有理由支持它（而且我对Edge浏览器一无所知。使用Windows 7，但我怀疑存在类似问题...）。

1）Mugen87的建议是等待字体加载是关键：

document.fonts.onloadingdone = function (fontFaceSetEvent) {

   // create canvas and render the font here (see above) 

}

2）对于我而言适用于文件夹上的自定义字体：

放在样式内或CSS中（格式是可选的，但建议使用）：

  @font-face {
    font-family: 'custom bold';
    src: url('fonts/custom bold.woff') format('woff');
  }
  @font-face {
    font-family: 'custom reg';
    src: url('fonts/custom regular.woff') format('woff');;
  }

3）要在Chrome中工作，我发现在字体样式中同时包含字体家族是关键，但是由于我想使用一种以上的字体（显然），因此我每次需要时都在JS中使用它字体，例如：

var fontreg;

fontreg = "custom reg";
document.body.style.fontFamily = fontreg;

ctx.font = "40px " + fontreg;

希望也能帮助别人。

如何在three.js中将自定义字体渲染的大小设置为屏幕外画布？

2 个答案: