css - 自定义字体在 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

或尝试字体平滑： http ://www.w3.org/TR/WD-font/#font-smooth-prop

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