Chrome切断了左侧类型的部分，firefox和IE显示效果很好。 Chrome bug？

Question

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

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

我尝试过（没有运气）：

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

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

思想？

Answer 1

我通过添加一个小文本缩进

来修复类似的问题

    text-indext: 4px;

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

Answer 2

这看起来与此处提到的渲染问题相同：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字体文件并因此忽略以下字体的想法。

Answer 3

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

Answer 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/