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

【问题标题】：Why is Pacifico webfont cropped in Webkit browsers?为什么在 Webkit 浏览器中裁剪 Pacifico webfont？
【发布时间】：2013-11-16 04:05:47
【问题描述】：

我在使用 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;
}

【问题讨论】：

不确定是什么原因造成的；可能是一个错误。但作为一种解决方法，您可以为主体提供 padding-left 而不是 margin-left。 jsfiddle.net/MrLister/dRcaB/7 或者，如果它只有一行，则给元素本身一个 padding-left 和一个负文本缩进。
实际上我无法设置填充或边距来解决此问题，因为填充/边距的值取决于单词中的第一个字符。例如，字符 D 和字符 O 需要不同的值。
不，我的意思是你可以，例如，给 div padding-left:10px; text-indent:-10px; 以便第一个单词开始的位置与 padding 和 text-indent 都是 0 一样。除非它没有被剪切关了。试试看。
是的，这会起作用 - 谢谢！但它并没有解决这个问题......

标签： html css google-chrome fonts font-face

【解决方案1】：

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

解决此问题的唯一补丁是对其父 DOM ELEMENT 使用 overflow: visible && padding 属性。

【讨论】：