在Webkit中呈现HTML/CSS webkit字体

Question

所以现在我很沮丧。你肯定知道Google Chrome的字体渲染问题。因此，我目前正在重新设计我的网站，我还添加了一个带有@ font -face的现代字体，但在webkit (safari和chrome)中，它看起来很可怕。一个字母看起来很清晰，另一个模糊了，诸如此类……我用css中的webkit反淡化功能试过了，但这似乎不起作用。我读到谷歌停用了这个功能。无论如何，我也尝试了文本阴影和文本笔画的技巧，它起了一点作用，但看起来不是很好。我看过其他有同样字体的网站，它看起来棒极了。那么他们是怎么做到的呢？有没有其他的可能性来解决这个问题？

谢谢。

Answer 1

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

在这篇文章的底部，它建议应用下面的CSS来平滑过渡。

.cube {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
}

它会强制浏览器使用GPU来渲染CSS。对我来说，这样做的一个副产品是更平滑的字体--在不同浏览器之间保持一致，并且不考虑所应用的转换。也许有人可以附和为什么这是可行的！虽然我不是很肯定，但我认为这可能会有所帮助。

这是我试过的网站，现在只为Chrome而建；http://dev.sitesma.de/

在4个灰色气泡下面的黑框中显示的文本非常尖锐，这取决于没有应用上述CSS的过渡浏览器。

Answer 2

要避免Chrome的字体渲染问题，可以试试this solution by Icomoon。它建议加载SVG字体，而不是Chrome的WOFF。SVG字体可以在Chrome/Windows上正确呈现，唯一的缺点是SVG字体文件较大。

只需添加以下CSS即可加载Chrome字体：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'icomoon';
        src: url('fonts/icomoon.svg#icomoon') format('svg');
    }
}