css - 跨度间距干扰文本渲染

Question

我正在编写一个自动完成功能，用户输入的文本将列表中的每个匹配元素拆分为两个不同颜色的部分:头部和尾部。

我把头部和尾部做成两个相邻的span像这样的元素:

<span class='head'></span>Hello<span class='tail'>, World!</span>

除非头部末尾有一个大写字母而尾部开头有一个小写字母，否则这种方法效果很好。像这样:

headless <span class='head'></span><span class='tail'>TestProductionClient</span>

头部单个大写字母<span class='head'>T</span>

两个小写字母之间再次正常

如您所见，第二张图片中的字母“T”和“e”之间有一个额外的间距。有没有办法通过改变 span 之间的差距来解决这个问题，或者更一般地说，有没有办法在不影响单词呈现的情况下为部分单词着色？

Answer 1

看起来您正在处理字体字距微调算法。

这里有一个可能更简单的方法:

::first-letter { 
    color: red;
    display: inline-block;
    letter-spacing: -.05em; /* careful with this; should be tested with various 
                               letter and font combinations */
}

span { font-size: 2em; }

<span>TestProductionClient</span>

• https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
• https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing
• https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning