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

Question

以下示例几乎总结了它 这段代码：

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

产地：

如您所见，字母K已移位（其最左边缘与T最左边缘不对齐）
是否有任何CSS技巧来克服这种错位？

Answer 1

这是由字形的设计引起的。许多字形在可见符号的左侧或右侧有一些空白区域。此间距超出了CSS的范围。你不能使用CSS左对齐字形中的可见符号，因为CSS不能“进入字形”。

但是，您可以通过不同方式使用CSS调整间距，可能会撤消字形中空格的影响。这需要在检查正在使用的字体中的字形的基础上完成，并且当您的字体建议由于某种原因而不被尊重时（例如，用户的系统没有字体），可能会导致奇怪的效果。 / p>

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

＆＃13;

＆＃13;

h1 { font: 96pt Arial }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

（或者在每种情况下使用CSS来播放边距）

Answer 3

这是由字体的kerning引起的。字体与字体的区别在于字距（每个字符之间的空格）的大小。 您可以尝试使用text-indent使其按照您的喜好对齐。它还允许使用负值

示例

text-indent: -5px;

Answer 4

这是字体的本质。每个字形在每个形状的前面和后面都有白色。否则所有形状都会粘在一起。重要的是要认识到白色对于字形的形状与实际形状本身一样重要。甚至还有带负偏移的字形，并且在设计这些偏移时会花费大量时间和精力。

并非所有白色都相等的原因是光学补偿。是的，你读得很好。字体设计师添加了白色以使字形看起来均匀分布。为了补偿黑色从K的茎到T下的左边间隙。

因此，将两个字形放在一个大尺寸的顶部是一个特殊的用例。通常一切正常，但如果它困扰你或你的客户，只需纠正你的（客户）喜欢的位置并完成它。

答案：margin-left: -4px;

Answer 5

只需使用FontCreator编辑字体即可。我想，这是最简单的方法。 ;） 此外，您可以使用：first-letter。

更改大写字母的样式

Answer 6

尝试使用此

h1{
float: left;
}