The following example pretty much sums it up.
This code:
以下示例几乎总结了它。这段代码:
<h1 style="background-color:#F2D680">
K
</h1>
<h1 style="background-color:#BAC9A9">
T
</h1>
Produces:
As you can see, the letter K is displaced (its leftmost edge does not align with T's leftmost edge)
Are there any CSS tricks to conquer such misalignment?
如你所见,字母K被移位(它的最左边缘不与T的最左边缘对齐)是否有任何CSS技巧来克服这种错位?
6 个解决方案
#1
2
This is caused by the design of the glyphs. Many glyphs have some empty space on the left or on the right of the visible symbol. This spacing is outside the scope of CSS. You cannot use CSS to left-align the visible symbols in the glyphs, because CSS cannot “get inside a glyph”.
这是由字形的设计引起的。许多字形在可见符号的左侧或右侧有一些空白区域。此间距超出了CSS的范围。你不能使用CSS左对齐字形中的可见符号,因为CSS不能“进入字形”。
However, you can adjust spacing with CSS in different ways, possibly undoing the effects of the space in the glyphs. This would need to be done on the basis of inspecting the glyphs in the font being used, and naturally when your font suggestion is not honored for some reason (e.g. the user’s system has not got the font), strange effects may be caused.
但是,您可以使用CSS以不同方式调整间距,可能会撤消字形中空格的影响。这需要在检查正在使用的字体中的字形的基础上完成,并且当您的字体建议由于某种原因(例如,用户的系统没有获得字体)而自然地被尊重时,可能会引起奇怪的效果。
So this would be unreliable tuning, but sometimes it might suffice. Example:
所以这将是不可靠的调整,但有时它可能就足够了。例:
h1 { font: 96pt Arial }<h1 style="background-color:#F2D680; text-indent: -0.04em">
K
</h1>
<h1 style="background-color:#BAC9A9">
T
</h1>#2
0
I think that the cause is the font. To my mind, the only solution is to change of font (one without this problem)...
我认为原因是字体。在我看来,唯一的解决方案是改变字体(没有这个问题)...
(Or to use CSS to playing with margins in each case)
(或者在每种情况下使用CSS来播放边距)
#3
0
That is caused by the kerning of the font. It vary from font to font how much the kerning (space between each character) will be. You can try to use text-indent to make it align as you like. It also allows using negative values
这是由字体的字距调整引起的。字体与字体的区别在于字距(每个字符之间的空格)的大小。您可以尝试使用text-indent使其按照您的喜好对齐。它还允许使用负值
Example
text-indent: -5px;
#4
0
It's the nature of fonts. Every glyph has white in front and behind each shape. Otherwise all shapes would stick together. It is important to realise that the white is as important to the shape of the glyph as the actual shape itself. There are even glyphs with negative offset and a lot of time and devotion goes into designing these offsets.
这是字体的本质。每个字形在每个形状的前面和后面都有白色。否则所有形状都会粘在一起。重要的是要认识到白色对于字形的形状与实际形状本身一样重要。甚至还有带负偏移的字形,并且在设计这些偏移时需要花费大量时间和精力。
The reason that not all white is equal is to optically compensate. Yes, you read it well. The font designer added white to make the glyphs look evenly spaced. To compensate the black from the stem of the K to the left gap under the T.
并非所有白色都相等的原因是光学补偿。是的,你读得很好。字体设计师添加了白色以使字形看起来均匀分布。为了补偿黑色从K的茎到T下的左边间隙。
So putting two glyphs on top of each other in a large size is an exceptional use case. Normally things work out okay, but if it bothers you, or your client, just correct the position to your (clients) liking and be done with it.
因此,将两个字形放在一个大尺寸的顶部是一个特殊的用例。通常情况下工作正常,但如果它困扰您或您的客户,只需纠正您(客户)喜欢的位置并完成它。
Answer: margin-left: -4px;
答案:margin-left:-4px;
#5
0
Just edit the font using FontCreator. I think, this is the easiest way. ;) Also, you can change style of capital letter using :first-letter.
只需使用FontCreator编辑字体即可。我想,这是最简单的方法。 ;)另外,您可以使用:first-letter更改大写字母的样式。
#6
-1
Try using this
试试这个
h1{
float: left;
}
#1
2
This is caused by the design of the glyphs. Many glyphs have some empty space on the left or on the right of the visible symbol. This spacing is outside the scope of CSS. You cannot use CSS to left-align the visible symbols in the glyphs, because CSS cannot “get inside a glyph”.
这是由字形的设计引起的。许多字形在可见符号的左侧或右侧有一些空白区域。此间距超出了CSS的范围。你不能使用CSS左对齐字形中的可见符号,因为CSS不能“进入字形”。
However, you can adjust spacing with CSS in different ways, possibly undoing the effects of the space in the glyphs. This would need to be done on the basis of inspecting the glyphs in the font being used, and naturally when your font suggestion is not honored for some reason (e.g. the user’s system has not got the font), strange effects may be caused.
但是,您可以使用CSS以不同方式调整间距,可能会撤消字形中空格的影响。这需要在检查正在使用的字体中的字形的基础上完成,并且当您的字体建议由于某种原因(例如,用户的系统没有获得字体)而自然地被尊重时,可能会引起奇怪的效果。
So this would be unreliable tuning, but sometimes it might suffice. Example:
所以这将是不可靠的调整,但有时它可能就足够了。例:
h1 { font: 96pt Arial }<h1 style="background-color:#F2D680; text-indent: -0.04em">
K
</h1>
<h1 style="background-color:#BAC9A9">
T
</h1>#2
0
I think that the cause is the font. To my mind, the only solution is to change of font (one without this problem)...
我认为原因是字体。在我看来,唯一的解决方案是改变字体(没有这个问题)...
(Or to use CSS to playing with margins in each case)
(或者在每种情况下使用CSS来播放边距)
#3
0
That is caused by the kerning of the font. It vary from font to font how much the kerning (space between each character) will be. You can try to use text-indent to make it align as you like. It also allows using negative values
这是由字体的字距调整引起的。字体与字体的区别在于字距(每个字符之间的空格)的大小。您可以尝试使用text-indent使其按照您的喜好对齐。它还允许使用负值
Example
text-indent: -5px;
#4
0
It's the nature of fonts. Every glyph has white in front and behind each shape. Otherwise all shapes would stick together. It is important to realise that the white is as important to the shape of the glyph as the actual shape itself. There are even glyphs with negative offset and a lot of time and devotion goes into designing these offsets.
这是字体的本质。每个字形在每个形状的前面和后面都有白色。否则所有形状都会粘在一起。重要的是要认识到白色对于字形的形状与实际形状本身一样重要。甚至还有带负偏移的字形,并且在设计这些偏移时需要花费大量时间和精力。
The reason that not all white is equal is to optically compensate. Yes, you read it well. The font designer added white to make the glyphs look evenly spaced. To compensate the black from the stem of the K to the left gap under the T.
并非所有白色都相等的原因是光学补偿。是的,你读得很好。字体设计师添加了白色以使字形看起来均匀分布。为了补偿黑色从K的茎到T下的左边间隙。
So putting two glyphs on top of each other in a large size is an exceptional use case. Normally things work out okay, but if it bothers you, or your client, just correct the position to your (clients) liking and be done with it.
因此,将两个字形放在一个大尺寸的顶部是一个特殊的用例。通常情况下工作正常,但如果它困扰您或您的客户,只需纠正您(客户)喜欢的位置并完成它。
Answer: margin-left: -4px;
答案:margin-left:-4px;
#5
0
Just edit the font using FontCreator. I think, this is the easiest way. ;) Also, you can change style of capital letter using :first-letter.
只需使用FontCreator编辑字体即可。我想,这是最简单的方法。 ;)另外,您可以使用:first-letter更改大写字母的样式。
#6
-1
Try using this
试试这个
h1{
float: left;
}