为什么在Webkit浏览器中裁剪Pacifico webfont？

Question

我遇到了Pacifico字体的问题，该字体可在Google字体中找到。此问题仅在Chrome和Safari中发生，其他浏览器也可以。

示例： http://jsfiddle.net/dRcaB/5/

问题是D字符在左侧被裁剪。如果我添加一些padding-left，它会正确显示。这种情况只发生在Pacifico字体上。

怎么了？

HTML：

<div class="pacifico">Deli D</div>
<div class="pacifico padding">Deli D</div>
<div class="damion">Deli D</div>

CSS：

@import url(http://fonts.googleapis.com/css?family=Pacifico);
@import url(http://fonts.googleapis.com/css?family=Damion);

.pacifico, .damion {
    background: red;
    margin-bottom: 20px;
}

.pacifico {
    font-family: "Pacifico";
    font-size: 60px;
}

.padding {
    padding-left: 10px;
}

.damion {
    font-family: "Damion";
    font-size: 60px;
}

Answer 1

我也面临同样的问题，但它的浏览器渲染问题。当您选择角色时，您将了解浏览器如何为角色提供空间。

解决此问题的唯一补丁是使用 overflow：visible＆amp;＆amp;填充属性为其父 DOM ELEMENT。