如何用JavaScript实现字体字母的动态Kerning（字距）调整？

你当前的代码没达到预期效果，核心问题是把所有字母都放在同一个元素里，并且每次循环都覆盖整个元素的margin-left，还错误地固定使用了sizes[1]的值，根本没给每个字母单独设置对应间距。

要实现给不同字母设置不同margin-left的需求，正确的做法是给每个字母单独包裹一个可设置样式的元素（比如<span>），再分别给每个元素设置对应的间距。

修正后的代码 #

window.onload = function(){
    const a = document.getElementById("x");
    // 注意把原sizes里的逗号改成点，CSS只识别小数点
    const sizes = ['0', '-0.095', '-0.07', '4'];
    const letters = ['H', 'o', 'm', 'e']; 
    let html = '';
    for(let i=0; i< letters.length; i++){
        // 给每个字母包裹span，设置对应的margin-left
        html += `<span style="margin-left: ${sizes[i]}rem">${letters[i]}</span>`;
    }
    a.innerHTML = html;
}

关键说明 #

• 每个字母单独用<span>包裹：这样才能对单个字母的间距进行独立控制，而不是给整个文本块设置统一样式
• 修正sizes里的格式：原代码中'-0,07'用了逗号，CSS会识别无效，必须改成小数点'-0.07'
• 循环对应索引：每个字母匹配数组中对应位置的间距值，而不是固定使用某一个索引的数值

补充方案 #

如果只是要整体调整字距，可以用CSS的letter-spacing属性，但如果需要对单个字母做差异化调整，上面的逐个包裹元素的方式是最直接有效的。

内容的提问来源于stack exchange，提问作者Transformers