css - 漏洞？与 chrome 中的自定义字体对齐

Question

这是一个奇怪的“错误”，我不能总是重现它，但在 fiddle 测试用例上似乎更经常失败。这仅在 chrome/windows 中显示，我至少无法在 IE 中重现它，并且有人确认它不会在 chrome/Linux 中发生。

fiddle : http://jsfiddle.net/u25zr/2/

如您所见，文本没有水平对齐。

一件奇怪的事:如果您右键单击文本，单击“检查器工具”并再次取消选中/选中 font-family 属性，它会神奇地修复。

我附上一张图片，这样你就可以看到会发生什么:

由于我使用了 jsfiddle 链接，我还需要添加一个代码块，所以我只添加标记，这根本不相关...

<div class="recipe">
    <div class="recipe-top">
        <div class="category"><a href="#">Text</a></div>
        <h2><a href="#" title="">Test Recipe 1</a></h2>
        <div class="date">12 Jan 2013</div>
    </div>
</div>

编辑:将 SVG 字体移动到底部，以便 Chrome 使用 woff 而不是 svg 来解决问题。所以看起来问题出在 SVG 渲染中。

Answer 1

好吧，在浪费了几个小时之后，这似乎是一个(另一个)chrome 错误。

https://code.google.com/p/chromium/issues/detail?id=95102

我也在这里找到了解决方案:

Chrome svg-Font-Rendering breaks Layout

这很好，但不验证 CSS。无论如何，我们无能为力。