Question

我想访问有关我用于在屏幕上呈现数据的字体的数据。例如，我希望能够知道构成字体的特定实例的黑线的大小（即，对于10号字体，粗体快递将带有字母“ 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，所以您不能指望这一点。

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

1 个答案: