Chrome会切断左侧的字体，Firefox和IE都可以正常显示。Chrome错误？

Question

我有一个带有自定义字体（Linotype的Didot）为斜体的常规H3元素。看到：

问题在于，Chrome浏览器会截取该类型的部分（例如后代和衬线），而其他浏览器会很好地显示该类型。H3不在具有隐藏溢出的任何容器中。

我已经尝试过（没有运气）：

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

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

有什么想法吗？

Answer 1

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

Answer 2

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

    text-indext: 4px;

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