Css 跨距间距会干扰文本渲染

我正在写一个自动完成，用户输入的文本将列表中的每个匹配项分成两个不同颜色的部分：头部和尾部

我将头部和尾部作为两个相邻的

span

元素，如下所示：

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

你好，世界！

除非头部末尾有大写字母，尾部开头有小写字母，否则这种方法很有效。像这样：

无头

TestProductionClient

标题中的单个大写字母

T

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

---

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

看起来您正在处理字体紧排算法

这里有一种可能更简单的方法：

：：第一个字母{
颜色：红色；
显示：内联块；
字母间距：-.05em；/*小心；应使用各种
字母和字体组合*/
}
span{font size:2em；}

---

TestProductionClient

在您的字体上，

T

和

e

与特殊字距一起呈现。由于

T

有空间靠近

e

，这看起来更自然，所以制造商将它们移到了一起。但是，当

T

和

e

不直接在一起时，在同一文本节点中，字母以默认距离显示，并且间距看起来不自然（这就是它们最初这样做的原因）

代码的相关部分：（已下载Arial svg文件的第3353-3355行）

。。。
...

“hkern”和“vkern”元素分别为水平方向和垂直方向的字形对定义紧排对。

编辑

---

它是而不是结扎；我错了。这是一种特殊的紧排。抱歉搞混了。理念不变；这是字体的一项功能，它的工作方式与此不同（也不应该如此）。

如果您认为这是一种特殊情况，但您可以在第一个跨距上添加几个像素的负

右边距，但这并不好。我和我可以被覆盖。你能提供小提琴或密码笔（或类似的）来演示吗？还有，哪些浏览器受到影响？是否有任何css应用于
.head
元素？下面是一个显示效果的小提琴。我在所有主要浏览器上都尝试过这种方法。@hungerstar代码相当于
$（'.head'）.html（前半部分）
，等等。当我只是手动键入html时也是如此。我怀疑是这样的。谢谢你的信息。在这种情况下，有没有办法只给一个单词的一部分涂上颜色？独立于字体？不是连字，只是紧排。这可能是一个连字：@Tobl我注意到了，我在Arial源代码中找到了相关部分。我马上编辑。
...
<hkern u1="T" u2="i" k="76" />
<hkern u1="T" u2="e" k="227" />
<hkern u1="T" u2="c" k="227" />
...