jquery - Webfont 在某些窗口大小下被截断

Question

我遇到了问题，我不明白是什么原因造成的。我购买了一种很酷的字体用于响应式设计。在某些窗口大小下，字体会被窗口边缘截断。这是一个屏幕截图:

使用 CSS3 分词以某种方式解决了这个问题，但我不想在这种情况下使用它。还有其他选择吗？
我更喜欢纯 CSS 选项，但如果涉及 JavaScript 或 jQuery，我也可以接受。

使用的字体是Armitage Black Italic from MyFonts .这是该文本的 CSS:

.text {
    font-weight: normal;
    margin-bottom: 24px;
    color: blue;
    font-family: ArmitageBlack-Italic, sans-serif;
    font-size: 3.75em;
    line-height: .85;
    text-transform: uppercase;
    letter-spacing: -0.29ex;
}

这个问题可以用任何字体重现，只要它足够大。如果字体是斜体就很明显了。
文本位于此容器内:

.container {
    display: table;
    width: 100%;
    height: 100%;
    padding-top: 25px;
    background-color: grey;
    text-align: center;
}

Answer 1

鉴于您的文本是斜体，文本将显示在它“所在”的位置之外——并且使用大字体，问题会更糟。据我所知，解决这个问题的唯一方法是巧妙地添加填充 :(