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
答
这是一个Chrome/Windows问题。它会影响字体厚度和字母间距,但您可以添加一个白色text-stroke
顺利出来:
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
-webkit-text-fill-color: white;
下面是它的截图:
答
我也发现如果你加
text-shadow:0px 0px #FF0000;
属性到我的CSS,它呈现正确。我不知道为什么。
您测试过哪些浏览器?另外,当我使用CSS3字体之前,我必须为各种浏览器指定各种格式。我承认我对Google的字体不太熟悉。 – Cfreak 2013-04-04 00:19:33
Chrome是最糟糕的,这就是图片所在。 在IE和Firefox中,它看起来好多了。 – morganw09dev 2013-04-04 00:30:56