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

Question

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

但是，这也会使部分字母超出 div 或表格单元格的障碍。我怎样才能让容器包含整个字母，这样它们就不会超出 div 进入边缘，或者被截断。 Example

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

Answer 1

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

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

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