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;

但我认为它显示的是一种假字体。左边是应该显示的样子，右边是实际显示的样子。

我的问题 http://resource.theboulderdesign.com/400/homebox/gettingcompare.png

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

Morgan Kenyon

- Morgan Kenyon

---

你测试过哪些浏览器？此外，在我之前使用CSS3字体时，我不得不为各种浏览器指定多种格式。虽然我承认我对Google的字体不太熟悉。 - Cfreak

Chrome是最差的，这就是图片中的原因。在IE和Firefox中看起来好多了。 - 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/

这是它的截图:

- Blender

Answer 2

我也发现如果你添加

text-shadow:0px 0px #FF0000;

当我将这个属性添加到我的CSS中时，它可以正确地呈现。但我不知道为什么。

- Morgan Kenyon