这是我导入 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”更改为其他字符时,我得到的结果都会有所不同。另外,是的,我可以用导入的字体在屏幕上书写,所以它确实成功加载到 <body>
中。 .
如何解决此问题?
浏览器以不同方式处理诸如字距调整之类的事情,因此不能保证字母之间的间距(即使是等宽字体)是统一的。如果字体具有不同的规范,则尤其如此;字符的外观可能相同,但分配给每个字形的实际规范可能更宽或更细。就数字排版而言,所见未必。
如果您使用的应用程序需要根据字体大小设置一些任意尺寸,我建议使用相对的 CSS 单位,而不是像 ch
,它与字符的宽度有关"0"在元素的当前字体中呈现。
我是一名优秀的程序员,十分优秀!