自定义字体在Chrome上无法正确显示

Question

我正在尝试为我的网站使用自定义字体，但在Chrome（最新）和Opera浏览器中显示错误，尽管它在其他浏览器上显示正确（平滑）。我尝试了几种不同的字体，在Chrome / Opera上有相同的结果。

我的代码：

@font-face {
    font-family: 'mainFont2';
    src: url('../fonts/Eurostile.eot');
    src: local('☺'), url('../fonts/Eurostile.woff') format('woff'), url('../fonts/Eurostile.ttf') format('truetype'), url('../fonts/Eurostile.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

问题：

Answer 1

这就是浏览器和操作系统如何渲染字体..但是尝试在.woff格式之前调用.svg格式，它可能会解决这个问题。

@font-face {
    font-family: 'mainFont2';
    src: url('../fonts/Eurostile.eot');
    src: local('☺'),
    url('../fonts/Eurostile.svg') format('svg'), 
    url('../fonts/Eurostile.woff') format('woff'), 
    url('../fonts/Eurostile.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Answer 2

我会推荐你​​这个问题： https://stackoverflow.com/a/4060778/1121870

或尝试使用font-smooth： http://www.w3.org/TR/WD-font/#font-smooth-prop

这里有一个讨厌的小黑客： http://www.elfboy.com/blog/text-shadow_anti-aliasing/