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

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 元素使用 overflow: visible && padding 属性。