html - 字体在浏览器中呈现不统一

Question

我正在尝试在我的网站和 css 中使用自定义字体，我有以下代码:

@font-face {
    font-family: 'Sketch';
    src: url('../fonts/Sketch.eot');
    src: url('../fonts/Sketch.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
ul#holder {font-family:'Sketch'}

字体确实在 Firefox 中显示。在 chrome 中，字体似乎渲染不流畅，也不像在 firefox 中那样好(我是否应该放弃在侧边栏中使用字体的想法并使用可以显示平滑文本的图像？;-/)

在 IE 中，字体根本没有出现。应该怎么做才能在 Chrome 中正确平滑这些字体并使它们在 IE 中正常工作？

Answer 1

不同的浏览器支持不同的字体格式:

因此您需要创建所有格式的字体。您可以使用 Font Squirrel (谢谢你，effectica)。

然后，您可以像这样导入它们:

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

这不是唯一可能的方法。你可以找到more complete information在 Paul Irish 的博客上讨论这个问题。

而且，无论如何，它们的外观在不同的浏览器中可能会略有不同。