修改

Question

我正在编写自动填充功能，用户输入的文本会将列表中的每个匹配项目分成两个不同颜色的部分：头部和尾部。

我将头部和尾部设为两个相邻的span元素，如下所示：

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

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

无头TestProductionClient

头部T

中的单个大写字母

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

正如您所看到的，字母之间有一个额外的间距＆＃34; T＆＃34;和＆＃34; e＆＃34;在第二张图片中。有没有办法通过改变跨距之间的差距来解决这个问题，或者更一般地说，有没有办法在不影响单词渲染的情况下对单词部分进行着色？

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>

Answer 2

在您的字体上，T和e与特殊字距一起呈现。因为T有一个空间可以靠近e，这看起来更自然，制作人将它们组合在一起。但是，当T和e不是直接相继时，在同一文本节点中，字母会以默认距离显示，并且间距看起来不自然（这就是为什么他们在第一名）。

代码的相关部分:(来自Arial svg文件的第3353-3355行已下载here）

...
<hkern u1="T" u2="i" k="76" />
<hkern u1="T" u2="e" k="227" />
<hkern u1="T" u2="c" k="227" />
...

'hkern'和'vkern'元素分别为水平方向和垂直方向的字形对定义字距对。
<子> source

修改

不一个结扎线;我错了。这是特殊的字距调整。抱歉混淆。这个想法保持不变;它是字体的一个特征，它不会以（而且它不应该）的方式工作。

跨度间距会干扰文本呈现

2 个答案:

修改