CSS字体渲染问题

Question

我正在开发一个网站。我正在使用谷歌字体来设置我的页面样式。但它没有正确显示。我已经阅读了一些关于虚假字体的内容，但我相信只有在不提供所需字体时才适用。我导入了我的谷歌字体，代码是

@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    src: local('Titillium WebSemiBold'), local('TitilliumWeb-SemiBold'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wprx7IBmrqA5IG9z8WNe77b9o.woff) format('woff');
}

我的字体CSS是

font-size:30px;
font-family: 'Titillium Web';
font-style: normal;
font-weight: 600;

但我相信它会显示一个虚假的字体。这是左边的图像与右边的图像之间的区别。

My problem http://resource.theboulderdesign.com/400/homebox/gettingcompare.png

我希望有人能解决我的问题。

Morgan Kenyon

Answer 1

这是Chrome / Windows问题。它会影响字体粗细和字母间距，但您可以添加白色text-stroke来平滑它：

-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
-webkit-text-fill-color: white;

演示：http://jsfiddle.net/zzmbu/

以下是它的截图：

Answer 2

我还发现如果你添加

text-shadow:0px 0px #FF0000;

我的CSS属性，它正确呈现。我不知道为什么。