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

Question

我在使用 Google 字体中提供的 Pacifico 字体时遇到问题。此问题仅在 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

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

解决此问题的唯一补丁是对其父DOM ELEMENT使用溢出：可见 && 填充属性。