Javascript 如何选择用于在canvas2d中创建字形纹理的字体大小

我想使用Canvas2D为WebGL制作一个glyph纹理。glyph纹理是一种充满字母的纹理，用于渲染文本

我遇到的问题是，鉴于Canvas API，我看不出如何以跨平台的“好”方式做到这一点。我是什么意思？例如，如果我使用一些旧的8位字体，我知道每个字符都是8x8像素，那么我就知道如果我想说32个字形，我就需要一个32个8x8单元格的倍数的纹理。比如说256x8或128x16或64x32等。。我会将每个字形的字符放在每个单元格中，然后完成

不幸的是，如果不做大量的工作，我就看不到任何使用canvas2D api计算字母大小的好方法

例如：假设我想要8x16 EGA样图示符。好吧，让我们检查一下。我告诉浏览器我想要一个“8px monospace”字体

这显然不是我想要的。除此之外，字体的大小取决于浏览器和平台。我甚至不确定我是否使用自己的字体，如果这能保证给定字体大小规格的字形将呈现多大

一种方法是尝试不同的尺寸，测量他们的角色，然后选择最接近的匹配。听起来效率很低

另一种方法可能只是选择一个大小并渲染所有角色，然后使用它们在WebGL中使用时所缩放的大小。在这种情况下，选择“8px monospace”会使字体变得非常难看，至少在Chrome中是这样。我可以迭代，直到我找到一些看起来不错的东西，但我不知道它在其他浏览器或其他平台上是否会看起来不错

是否有一些官方的方法可以知道字体的大小，所以如果你想制作字形，你可以吗？或者，对于一般如何做到这一点，是否有其他参考？就像一个非浏览器原生应用程序如何处理这个问题

我想对于大多数本地应用程序，您只需让用户选择字体大小，然后在空间不足时进行剪裁或换行。但是对于一个游戏来说，你经常需要你的文本来适应特定大小的空间，所以你需要选择一种适合这个空间的字体，这似乎是个问题

---

顺便说一句：这个问题出现了。

我根本不建议使用canvas2d（编辑：因为canvas2d在所有与字形相关的方面都很糟糕，不仅限于无法计算字形的高度，它不可避免地会导致大量工作）。在我看来，SVG或HTML（取决于您的偏好）在所有与字体相关的方面都非常出色，CSS使调整所有与字体相关的选项和指标变得非常容易

我认为（但不是100%确定地知道）所有主流浏览器都支持通过数据uri将svg光栅化为纹理

let img = new Image();
img.src = `data:image/svg+xml,
    <svg xmlns="http://www.w3.org/2000/svg" width="128" height="128">
        <!-- some grid layout with inlined styles -->
    </svg>
`;
 img.onload = function ( loadedTexture) { ... } 

A.
B
C
D
E
F
G
H
我
J
K
L
M
N
O
P
Q
R
s
T
U
v
W
X
Y
Z
A.
B
C
D
E
F
G
H
我
J
K
L
M
N
o
P
Q
R
s
T
U
v
W
x
Y
Z
1.
2.
3.
4.
5.
6.
7.
8.
9
0

您的代码似乎无法回答问题（！？）。@markE抱歉，您是对的，我忘记了最重要的部分。我大体上同意您的观点，即最好不要自己编写文本，但有时您需要在3D场景中使用文本，例如标记建筑物，并希望被遮挡的建筑物的标签也被遮挡。或者在3D中把名字放在头像之上MMO@gman也许这是一个误解，在webgl中呈现字体完全有意义。我建议不要使用canvas2d来创建纹理图集，而是使用svg/html和css。太棒了！谢谢好办法

// Object {minWidth: 0, maxWidth: 4.80078125}

let img = new Image();
img.src = `data:image/svg+xml,
    <svg xmlns="http://www.w3.org/2000/svg" width="128" height="128">
        <!-- some grid layout with inlined styles -->
    </svg>
`;
 img.onload = function ( loadedTexture) { ... }