JavaScript中的动态字距调整或字体跟踪？

qyzbxkaa 于 2023-05-16 发布在 Java

关注(0)|答案(1)|浏览(91)

我想知道是否有一种方法可以使用Javascript更改字体字母的字距。我也想知道它是否可以动态完成，因为我知道有一个手动的方式来做这件事。
我的意思是，有没有一种方法可以设置一个可以动态附加到margin-left的大小范围。
从下面的代码中，我希望例如，“H”的margin-left值为0 rem，“o”的margin-left值为-0.095rem，等等。

var a = document.getElementById("x");

window.onload = function(){
let sizes = ['0', '-0.095', '-0,07', '4'];
let letters = ['H', 'o', 'm', 'e']; 
for(var i=0; i< letters.length; i++){
        a.innerHTML += letters[i]
        a.setAttribute('style', 'margin-left:'+sizes[1]+"rem")
    }
}

上面的代码没有产生预期的结果，但它会给予你明白我的意思。有办法吗？希望大家都清楚…
更新了代码

JavaScript

来源：https://stackoverflow.com/questions/76230689/dynamic-kerning-or-tracking-of-fonts-in-javascript

1条答案

按热度按时间

c86crjj01#

下面是一个简单的实现示例。我只是改变了你的大小值，使他们更明显的渲染

const sizes = ['0rem', '1rem', '1.3rem', '4rem'];

const letters = ['H', 'o', 'm', 'e'];

letters.forEach((letter, index) => {
  const span = document.createElement("span");
  span.textContent = letter;
  span.style.marginLeft = sizes[index];
  document.body.appendChild(span);
});

赞(0）回复(0）举报 2023-05-16

我来回答

JavaScript中的动态字距调整或字体跟踪？

1条答案

相关问题

热门标签

最新问答