如何摆脱一些大写字母的水平偏移/填充

Question

以下示例几乎总结了它。
此代码：

<h1 style="background-color:#F2D680"> 
    K 
</h1> 
<h1 style="background-color:#BAC9A9"> 
    T 
</h1> 

产地：

正如你可以看到，信K移位（其左侧边缘不T的最左侧边缘对齐）
是有没有任何CSS技巧来克服这种错位？

Answer 1

我认为原因是字体。 在我看来，唯一的解决办法是（没有这个问题的一种）来改变字体的...

（或者用CSS来在每种情况下利润率播放）

Answer 2

尝试使用此

h1{ 
float: left; 
} 

Answer 3

这是由字体的kerning引起的。它从字体到字体各不相同，字间距（每个字符之间的空间）将是多少。 您可以尝试使用文本缩进来使其对齐，只要你喜欢。它还允许使用负值

例

text-indent: -5px; 

Answer 4

这是由字形的设计引起的。许多字形在可见符号的左侧或右侧都有一些空的空间。这个间距不在CSS的范围内。您不能使用CSS左对齐字形中的可见符号，因为CSS无法“进入字形内”。

但是，您可以用不同的方式调整CSS的间距，可能会撤消字形中空间的效果。这需要在检查使用的字体中的字形的基础上完成，并且当你的字体建议由于某种原因（例如用户的系统没有获得字体）而不被遵守时，可能会造成奇怪的效果。

所以这将是不可靠的调整，但有时它可能就足够了。例如：

h1 { font: 96pt Arial }

<h1 style="background-color:#F2D680; text-indent: -0.04em"> 
 
    K 
 
</h1> 
 
<h1 style="background-color:#BAC9A9"> 
 
    T 
 
</h1>

Answer 5

这是字体的性质。每个字形在每个形状的前面和后面都有白色。否则所有形状都会粘在一起。认识到白色与字形的形状与实际形状本身同样重要很重要。甚至有消极偏移的字形和大量的时间和精力去设计这些偏移量。

不全白的原因是光学补偿。是的，你读得很好。字体设计师添加了白色，以使字形看起来均匀分布。为了补偿从K的茎到黑色T下的缺口的黑色，所以将两个字形放置在大尺寸的顶部是一个特殊的用例。通常事情没有问题，但是如果它困扰了你或者你的客户，只需要纠正你对（客户）喜好的立场并加以处理即可。

答：margin-left: -4px;

Answer 6

只要编辑使用FontCreator的字体。我认为，这是最简单的方法。 ;） 另外，您可以使用：首字母更改大写字母的样式。