gpt4 book ai didi

javascript - CSS3 @字体脸。获取导入字体的宽度

转载 作者:太空宇宙 更新时间:2023-11-03 19:13:24 24 4
gpt4 key购买 nike

这是我导入 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"在元素的当前字体中呈现。

关于javascript - CSS3 @字体脸。获取导入字体的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7594709/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com