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

Question

我想访问有关我用来在屏幕上呈现数据的字体的数据。例如，我希望能够知道构成字体特定实例的黑线的大小(即，对于字体大小 10，粗体 courier 将具有字母“I”，其主垂直线大小为 2 像素)和/或字母内有空格的空格(即 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 变量实际上采用了 css font 属性，因此您可以根据自己的喜好进行调整。

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

让我们采用(可能)最细的字符，一条垂直线:|。假设字母 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 有 inconsistent letter spacing所以你不能指望这一点。