如何防止草书CSS字体超出容器边界

Question

使用Google字体Mr De Haviland，我注意到此字体的字母重叠，尤其是大写字母。一个字形延伸到下一个字形。我确信这是故意的，因为它创造了一个很好的草书写作效果。

然而，这也会使部分字母延伸超过div或table单元格的屏障。如何使容器包含整个字母，这样它们就不会超出div而超出边距，或者被截止。 Example

添加填充不是我正在寻找的答案，因为所需的填充量似乎因字母而异。

Answer 1

您可以将少量padding-left和padding-right应用于使用此字体的所有文本容器，例如

h1, h2, h3, h4 {
  padding: 0 0.2em;
}

（通过在浏览器工具中尝试不同的值，将该值调整为真正适合的值）