以编程方式访问 JavaScript 中的字体规范

Question

我想访问有关我用于在屏幕上呈现数据的字体的数据。例如，我希望能够知道构成字体特定实例的黑线的大小(即，粗体快递员将有字母"I"，其主垂直线大小为 2 像素，字体大小为 10(和/或字母内有空格的空间(即， B，A，还有C，O等(。我知道我可以访问正在使用的字体的名称(或通过CSS自己决定(，但重点不是知道我正在使用的字体(或操作它(，而是访问有关它的特定数据。

谢谢！

Answer 1

我很确定这在动态上是不可能的。

您可以做的是像这样测量文本宽度：

function measureWordSize(word, font) {
var canvas = measureWordSize.canvas || (measureWordSize.canvas = document.createElement("canvas"));
var context = canvas.getContext("2d");
context.font = font;
var metrics = context.measureText(word);
return metrics.width;
}
console.log(measureWordSize("Hello World!", "Arial"));

请注意，font变量实际上采用 cssfont属性，因此您可以根据自己的喜好进行调整。

我可以想到以下技巧，您可以使用它来计算字母内的空格，但它并不准确：

让我们取最细的字符(可能(，一条垂直线：|.通过假设字母O两侧的宽度与垂直线的宽度相同，我们可以尝试计算内部的空间：

function measureWordSize(word, font) {
var canvas = measureWordSize.canvas || (measureWordSize.canvas = document.createElement("canvas"));
var context = canvas.getContext("2d");
context.font = font;
var metrics = context.measureText(word);
return metrics.width;
}

let font = "Arial";
let lineSize = measureWordSize("|", font);
let spaceInsideO = measureWordSize("O", font) - lineSize*2;
console.log(lineSize);
console.log(measureWordSize("O", font));
console.log(spaceInsideO);

我们可以看到这是非常不准确的。例如，如果我们看 3 行和 1 行 O：

|||

O

我们可以看到，在这种字体中，三|等于大约O.所以我们的回答是准确的。但是，它包括字母之间的间隙。如果你不太关心准确性，你可以接受这段代码并改进它，但这已经非常接近了。例如，Arial 的字母间距不一致，因此您不能指望这一点。