CSS3 @font-face。获取导入字体的宽度

Question

这就是我导入 TTF 字体的方式：

@font-face {
    font-family: bt;
    src: url('Monospace 821 BT.ttf');
}
body {
    font: normal 21px bt;
}

这就是我计算字体字符宽度的方式：

window.onload = function() {
    var k = document.createElement('div');
    k.innerHTML = 'M';
    k.style.position = 'absolute';
    document.body.appendChild(k);

    var size = [
        k.offsetWidth,
        k.offsetHeight
    ];

    document.body.removeChild(k);
    alert(size[0]+' '+size[1]);
};

使用这种方法，我能够计算宽度和宽度。成功地调整了系统固定宽度字体（如“Monospace”、“Monaco”等）的高度。

但是对于导入的字体，每次将字符“M”更改为其他字符时，我得到的结果都会有所不同。另外，是的，我可以使用导入的字体在屏幕上书写，因此它确实已成功加载到 中。

如何修复这种行为？

Answer 1

浏览器以不同的方式处理字偶间距等问题，因此字母之间的间距（即使是等宽字体）不能保证统一。如果字体具有不同的规格，则尤其如此；字符的外观可能相同，但分配给每个字形的实际度量可能更宽或更薄。就数字排版而言，您所看到的并不总是您所得到的。

如果您使用的应用程序需要根据字体大小设置一些任意尺寸，我建议使用相对 CSS 单位，例如 ch，它与字符“0”的宽度有关，如下所示以元素的当前字体呈现。