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”，“摩纳哥”等。

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

如何解决此问题？

Answer 1

浏览器处理字距不同的字符串，因此字母之间的间距（即使它是等宽字体）也不能保证一致。特别是如果字体具有不同的指标;字符的外观可能相同，但分配给每个字形的实际指标可能更宽或更薄。就数字排版而言，你所看到的并不总是你所得到的。

如果您使用的应用程序需要根据字体大小设置一些任意尺寸，我建议使用相对的CSS单位，而不是ILogger _logger // SeriLog interface _logger.Information("Simple message", null);，它与字符“0”的宽度有关。在元素的当前字体中呈现。

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

1 个答案: