html - 为什么在Webkit浏览器中裁剪了Pacifico Webfont？

我遇到了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;
}

最佳答案

我也面临同样的问题，但它的浏览器渲染问题。选择角色后，您将了解浏览器如何为角色提供空间。
解决此问题的唯一修补程序是对其父DOM元素使用overflow:visible&&padding属性。

关于html - 为什么在Webkit浏览器中裁剪了Pacifico Webfont？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19786341/