javascript - 同一单词中字符之间的字母间距是否可能不同？是否可以仅使用CSS来完成？

我已经做过一些研究，并且知道字母间距的CSS属性，但是在同一个单词中是否可以将不同字符分隔开来？

我不会跳过任何层，因此无法通过每两个字母使用跨度标签来完成此操作。

.ex      { letter-spacing: -2.0px }
.am      { letter-spacing: -1.5px }
.pl      { letter-spacing: -1.0px }
.e       { letter-spacing: -0.5px }

<span class="ex">Ex</span><span class="am">am</span><span class="pl">pl</span><span class="e">e</span>

我正在寻找的功能将更像这样，但是我不确定是否有可能：

.ex      { letter-spacing: -2.0px }
.am      { letter-spacing: -1.5px }
.pl      { letter-spacing: -1.0px }
.e       { letter-spacing: -0.5px }

<kern class="1">E<kern2 class="2">x</kern><kern3 class="3">a</kern2><kern4 class="4">m</kern3><kern5 class="5">p</kern4><kern6 class="6">l</kern5>e</kern6>

我感谢任何反馈，谢谢！

最佳答案

是的你可以。

我使用jQuery函数将每个字母包装在span中。然后，通过使用span:nth-child(x)可以给它们所有不同的负左边界。

$(function() {
        var words = $('p').text().split("");
        for (i in words)
            words[i] = '<span>' + words[i] + '</span>';
        var text = words.join('');
        $("p").html(text);
});

p {
    font-size: 3em;
}
span {
    border: 1px solid red;
    margin-left: -5px;
}
span:nth-child(4) {
    margin-left: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Example</p>

编辑

如果要设置每个字母的边距，则可以使用它。现在，我仅定义了“示例”一词的字母，但我想您会明白的。

$(function() {
    var abc = {e:'-5px', x:'-5px', a:'-5px', m: '15px', p:'-5px', l:'-5px'};

    var words = $('p').text().split("");
    for (i in words)
        words[i] = '<span style="margin-left: '+abc[words[i]]+'">' + words[i] + '</span>';
    var text = words.join('');
    $("p").html(text);
});

p {
    font-size: 3em;
}
span {
    border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Example</p>

关于javascript - 同一单词中字符之间的字母间距是否可能不同？是否可以仅使用CSS来完成？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30125896/