HTML斜体字母从它们的容器伸出（并且可以通过下一个容器的背景被切割）

Question

为了说明问题（背景有一个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, 10, 0.2);"><span style="border: 1px solid red;color: red;background-color: rgba(200, 0, 0, 0.2);">World</span>&nbsp;&nbsp;</span><span style="border: 1px dotted green; background-color: rgba(200, 0, 0, 0.2);"><span style="border: 1px solid blue; color: blue;background-color: rgba(0,0,200,0.2);">World</span>&nbsp;&nbsp;</span> 
</span> 

BREAK-缺乏符号是有意的：html代码是后端生成的，字体样式可能会有所不同。可悲的是，我无法发布图片。如果在示例中删除“nbsp;” - 符号，则会看到第一个单词的最后一个字母将被下一个容器的背景部分切割。

所有我在这个问题上找到（当然，有些）是此链接：http://www.positioniseverything.net/explorer/italicbug-ie.html

这是正常的，有些字母（如“J”，“F”，尤其是在他们的斜体字形式）从突出他们的容器盒（如果没有填充物存在）。

但是，为什么这是正确的？据我了解 - 这是一个HTML标准，但我找不到确切的文件，也不能找到这种行为背后的推理...

有人可以请解释为什么这种行为认为是正常的？对于“背景切割字母”问题有没有很好的解决方案？因为我看到的每一个所见即所得也受到这个影响，但我似乎无法找到任何抱怨的人（嗯，也许我只是在搜索查询中吮吸，谁知道呢）。

Answer 1

所引用的文档正确地描述了字母可能会超出其容器框的边界，尤其是以斜体字体显示。这是一个排版问题，所以它没有在HTML或CSS规范中指定，尽管一些CSS材料可能会引用它。集装箱只是一个印刷工的操场，他可能会决定有时穿越边界。容器盒的高度是字体大小，其宽度是字形的前进宽度，这些数量在程序布置文本时被程序使用;他们不会限制字形。

当使用假斜体（合成斜体，算法倾斜的文本）时，这更是如此，当您使用Impact并要求斜体时会发生这种情况。它没有斜体字体，即由印刷工设计的字形斜体形式，因此浏览器需要忽略您的请求或产生假斜体。由于字母的形状不会改变，除非通过倾斜，倾斜角度必须相当大以使“斜体”看起来与正常不同。而且倾斜量越多越容易越过容器盒的右边界。

在经典印刷术中，可以通过在需要时添加一些间距来解决此类问题。这很难实现自动化，因此现在大多数情况下都没有完成。在CSS中，您可以使用padding-right，但您自然需要在单元中包装单词或字母（通常为span），以便您可以将样式应用于例如

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

或

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

这是麻烦的，当然，特别是因为间隔的量必须取决于最后一个字母（和字体和也许对下一个字的第一个字母）。或者，您可以使用固定宽度的空格，例如 ，这与铅字体排版中使用的方法相对应（打印字母后放置了一小段金属），但这不灵活且不可靠（这些字符的宽度实际上因字体而异）。