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>

缺少中断符号是有意的: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 标准，但我找不到确切的文档，也找不到这种行为背后的原因......

有人可以解释为什么这种行为被认为是正常的吗？是否有解决“背景剪切字母”问题的好方法？因为我看到的每个所见即所得也受此影响，但我似乎找不到任何人提示(好吧，也许我只是不擅长搜索查询，谁知道呢)。

Answer 1

正确引用的文档描述了字母可能会超出其容器框的边界，尤其是斜体字样。这是排版问题，因此在 HTML 或 CSS 规范中未指定，尽管某些 CSS Material 可能会引用它。容器只是排版师的 Playground ，他有时可能会决定越界。容器框的高度是字体大小，它的宽度是字形的前进宽度，这些量被程序在布局文本时使用；他们不限制字形。

当使用假斜体(合成斜体，算法倾斜的文本)时更是如此，当您使用 Impact 并要求斜体时会发生这种情况。它没有斜体字体，即由排字员设计的斜体字形形式，因此浏览器需要忽略您的请求或产生假斜体。由于字母的形状不会改变，除非通过倾斜，倾斜 Angular 必须相当大才能使“斜体”看起来不同于正常。并且倾斜的量使得越过容器箱的右边界的可能性更大。

在经典排版中，此类问题可以通过在需要时添加一些间距来解决。这很难自动化，因此现在大多没有完成。在 CSS 中，您可以使用 padding-right，但您自然需要在元素中包裹一个单词或字母(通常是 span)，以便您可以应用样式，例如

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

或

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

当然，这很麻烦，尤其是因为间距量需要取决于最后一个字母(以及字体，可能还取决于下一个单词的第一个字母)。或者，你可以使用固定宽度的空间，例如 ，这对应于铅字排版中使用的方法(打印字母后放置一 block 窄金属片)，但这样不灵活且不可靠(这些字符的宽度实际上因字体而异)。