html斜体字母从容器中突出(可能被下一个容器的背景切割)

为了说明问题(背景的alpha值为0.2用于演示目的)：
http://jsfiddle.net/Novado/enhuc4jv/1/

<span style="font-family: impact; font-size: 500pt; font-style: italic;">
    <span style="border: 1px dotted #000;background-color: rgba(10,10,0.2);"><span style="border: 1px solid red;color: red;background-color: rgba(200,0.2);">World</span>&nbsp;&nbsp;</span><span style="border: 1px dotted green; background-color: rgba(200,0.2);"><span style="border: 1px solid blue; color: blue;background-color: rgba(0,200,0.2);">World</span>&nbsp;&nbsp;</span>
</span>

缺少中断符号是故意的：HTML代码是后端生成的,字体样式可能会有所不同.可悲的是我还不能发布图像.如果删除“nbsp;” – 示例中的符号,您将看到第一个单词的最后一个字母将被下一个容器的背景部分剪切.

我在这个问题上发现的(好吧,有点)是这个链接：http://www.positioniseverything.net/explorer/italicbug-ie.html

It is normal that some letters (like ‘j’,‘f’,especially in their italic form) protrude from their container Box (if no padding is present.)

但究竟是为什么呢？据我了解 – 这是一个HTML标准,但我找不到确切的文件,也无法找到这种行为背后的原因……

有人可以解释为什么这种行为被认为是正常的？对于“背景剪切字母”问题,是否有一个很好的解决方案？因为我看到的所有WYSIWYG也受此影响,但我似乎无法找到任何人抱怨(好吧,也许我只是吮吸搜索查询,谁知道).

解决方法

正确引用的文件描述了字母可能会延伸超过其容器盒的边框,尤其是斜体字体.这是排版问题,因此未在HTML或CSS规范中指定,但某些CSS材料可能会引用它.容器盒只是一个印刷师的操场,他可能有时会决定越过边界.容器盒的高度是字体大小,宽度是字形的前进宽度,这些数量在程序布局时由程序使用;他们不限制字形.

当使用伪斜体(合成斜体,算法倾斜文本)时会更加如此,当您使用Impact并请求斜体时会发生这种情况.它没有斜体字体,即由印刷师设计的斜体形式的字形,因此浏览器需要忽略您的请求或生成伪斜体.由于字母的形状不会改变,除了通过倾斜,倾斜角度必须相当大,以使“斜体”看起来与正常不同.并且倾斜量使得更有可能越过容器盒的右边界.

在经典排版中,可以通过在需要时添加一些间距来解决此类问题.这很难实现自动化,因此现在大部分时间都没有完成.在CSS中,你可以使用padding-right,但你自然需要在一个元素(通常是span)中包含一个单词或一个字母,这样你就可以将一些东西应用到样式中,例如：

<span style="padding-right: 0.08em">World</span>

要么

<i style="padding-right: 0.08em">World</i>

当然,这很麻烦,特别是因为间距的数量需要取决于最后一个字母(以及字体和下一个字母的第一个字母).或者,您可以使用固定宽度的空格,例如& thinsp;,它对应于铅排版中使用的方法(在打印字母后放置一块狭窄的金属),但这不灵活且不可靠(宽度)这些字符实际上因字体而异).