CSS字体渲染问题

我正在开发一个网站。我正在使用谷歌字体来设计我的页面。但它不能正确显示。我读了一些人造字体，但我相信只有当所需的字体没有提供时才适用。我已经导入我的谷歌的字体，代码是CSS字体渲染问题

@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

来源

2013-04-04 morganw09dev

您测试过哪些浏览器？另外，当我使用CSS3字体之前，我必须为各种浏览器指定各种格式。我承认我对Google的字体不太熟悉。 – Cfreak 2013-04-04 00:19:33

Chrome是最糟糕的，这就是图片所在。在IE和Firefox中，它看起来好多了。 – morganw09dev 2013-04-04 00:30:56

这是一个Chrome/Windows问题。它会影响字体厚度和字母间距，但您可以添加一个白色text-stroke顺利出来：

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

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

下面是它的截图：

enter image description here

来源

2013-04-04 00:25:10 Blender

-1

我也发现如果你加

text-shadow:0px 0px #FF0000;

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

来源

2013-04-14 03:15:04 morganw09dev

CSS字体渲染问题

回答

相关问题