Chrome截掉了左边的部分字体，firefox和IE显示正常。铬错误？答案

【问题标题】：Chrome cuts off parts of type on the left, firefox and IE display fine. Chrome bug?Chrome截掉了左边的部分字体，firefox和IE显示正常。铬错误？
【发布时间】：2014-10-01 16:58:32
【问题描述】：

我有一个带有自定义字体（来自 Linotype 的 Didot）的常规 H3 元素，采用斜体样式。见：

问题在于 Chrome 会裁剪部分类型（例如下划线和衬线），而其他浏览器则可以正常显示该类型。 H3 不在任何具有隐藏溢出的容器中。

我试过了（没有运气）：

overflow: visible
text-rendering: optimizeLegibility;（和其他值）
* { overflow: visible !important; }
其他“字距调整”技巧

似乎唯一可行的解决方案是给 H3 一些左侧填充...但我觉得这是一个不合适的解决方案，因为我必须将标题下方的所有内容向右移动相同的数量。

想法？

【问题讨论】：

似乎还有另一个容器溢出：隐藏。你能提供一个带有常规字体的jsFiddle，使用截图所用的确切结构吗？
一个小提琴会很好

标签： html css google-chrome dom

【解决方案1】：

我通过添加一个小文本缩进解决了与此类似的问题

    text-indext: 4px;

所需的确切缩进值将根据字体本身和字体大小而有所不同。对于使用 @Nico O jsfiddle 的示例，添加 16px 文本缩进可解决此问题。

【讨论】：

这在文本左对齐时效果很好，但如果文本右对齐则不起作用。我试过给一个负值，但它不起作用。

【解决方案2】：

当应用至少一个将元素提升为RenderLayer 的CSS 属性（例如transform 或opacity）时，文本似乎开始被截断。所以这似乎是渲染器的内部问题，无法在 CSS 级别轻松修复。我建议只添加一些左填充（和右填充，如有必要）以使所有字母都适合元素边界，并通过变换或负边距补偿这些填充。

【讨论】：

这是一个很好的答案并且很有意义。我们正在使用翻译和不透明度。
我尝试使用 DOM 检查器一一禁用这些属性。当最后一个被禁用时，错误消失了。所以我认为这可能是原因，因为带有 RenderLayer 和不带 RenderLayer 的元素的渲染通常会有所不同（有时它让我想起了旧 IE 的 hasLayout 行为）。
非常好的和有趣的答案。这是一个显示问题的 jsFiddle：jsfiddle.net/p7wum0bp/3
我想我会用那个小提琴来提交错误报告。也许我们可以看到发生了什么。其他浏览器没有问题：|
也发布在 CRBugs 上：code.google.com/p/chromium/issues/…

【解决方案3】：

这看起来与此处提到的相同渲染问题：Bottom of custom font cut off in Opera and webkit

根据https://stackoverflow.com/a/8617238/4097933，您的字体 chrome 的 css 文件将加载 EOT 并忽略以下 woff、ttf 和 svg 字体。

@font-face{
font-family:"Linotype Didot eText W01";
src:url("/dv2/2/dbcd27d7-e1e4-4757-b144-32def75c2eaa.eot?    d44f19a684109620e4841579a790e818c1a37164efcdf0e038d168bbbe670847e33d73662846b089fb09be21eee584570d77c537 80c9058895373c54fba457480d6ed4c5ba215f67d79aebaaeaeeccdfa718e07c265a761f65012da2ebccc6f4b9c3f5f9&projectId=de149dbb-2608-424a-b0f0-ab02bbf5b45c");
src:url("/dv2/3/6bfc2eb5-d4a7-42d3-a372-305f28511a22.woff?d44f19a684109620e4841579a790e818c1a37164efcdf0e038d168bbbe670847e33d73662846b089fb09be21eee584570d77c53780c9058895373c54fba457480d6ed4c5ba215f67d79aebaaeaeeccdfa718e07c265a761f65012da2ebccc6f4b9c3f5f9&projectId=de149dbb-2608-424a-b0f0-ab02bbf5b45c") format("woff"),url("/dv2/1/b66a964d-58b6-42f1-a3f7-fecb060b2ec3.ttf?d44f19a684109620e4841579a790e818c1a37164efcdf0e038d168bbbe670847e33d73662846b089fb09be21eee584570d77c53780c9058895373c54fba457480d6ed4c5ba215f67d79aebaaeaeeccdfa718e07c265a761f65012da2ebccc6f4b9c3f5f9&projectId=de149dbb-2608-424a-b0f0-ab02bbf5b45c") format("truetype"),url("/dv2/11/0a52b68f-a61f-4fa5-a685-99f557fcd924.svg?d44f19a684109620e4841579a790e818c1a37164efcdf0e038d168bbbe670847e33d73662846b089fb09be21eee584570d77c53780c9058895373c54fba457480d6ed4c5ba215f67d79aebaaeaeeccdfa718e07c265a761f65012da2ebccc6f4b9c3f5f9&projectId=de149dbb-2608-424a-b0f0-ab02bbf5b45c#0a52b68f-a61f-4fa5-a685-99f557fcd924") format("svg");
font-weight:400;font-style:normal;
}

鉴于此尝试先放置 svg 字体，然后是 ttf，然后是 wof。

更新：我找不到任何支持 Chrome 将加载 EOT 字体文件并因此忽略以下字体的想法。

【讨论】：

我尝试了不同的字体顺序 - 它似乎没有帮助。我还尝试添加 src:local('☺'), 技巧。我通过检查控制台网络选项卡确认它以正确的顺序加载。还是会被切断。然而，有趣的是，typecast.com/preview/fontscom/1012:692325?plan=Custom 工作得很好（将字体切换为 linotype italic w01 时）
Chrome 能识别 EOT 吗？ EOT不是只有IE支持吗？我想如果 Chrome 忽略 WOFF 等，字体根本不会显示。
我找不到任何可以说 Chrome 会加载 EOT 字体文件的内容。
根据我的测试，Chrome 会忽略 eot 并转而选择 WOFF/TTF/SVG -- 以先到者为准。

【解决方案4】：

很难判断这是 chrome 的错误、字体错误还是完全错误。

我试图在这里重现问题：http://jsfiddle.net/p7wum0bp/1/

正如您所看到的斜体，衬线 j 并没有像您的图像中那样被切断。我想这可能取决于字体。

正如你所说，你不想给元素一个填充，因为标题会从文本的其余部分移开。作为一种解决方案，您可以使用填充和边距的组合，以使文本再次位于正确的位置。喜欢这里：

.b-capa-list-item h3
{
    font-family: "Linotype Didot eText W01";
    font-size: 25px;
    padding-bottom: 7px;
    text-transform: lowercase;
    font-style: italic;
    margin: 0 -10px;
    padding: 0 10px;
}

通过这个有点丑陋的解决方法，您可以达到以下预期结果：

With the answer of @Ilya Streltsyn 我能够使用 opacity 属性在 jsFiddle 中重现该问题。 您可以在此处查看行为：http://jsfiddle.net/p7wum0bp/3/

【讨论】：