字体不能平滑渲染

Question

我正在使用自托管字体开发网站。在不同的浏览器和计算机上进行测试时，我注意到这些字体在任何网站上都没有很好的显示效果。我注意到在我的计算机上，字体在Chrome上显示得很好，但在其他计算机上，字体显示得很粗糙。

这些是我的字体声明：

 @font-face {
    font-family: "Bitter";
    src: url('http://predict.lyon-forums.com/style/fonts/Bitter_Regular.otf'),
            url('http://predict.lyon-forums.com/style/fonts/Bitter_Regular.ttf');
}

@font-face {
    font-family: "Oswald";
    src: url('http://predict.lyon-forums.com/style/fonts/Oswald_Regular.otf');
}

@font-face {
    font-family: "Oswald Bold";
    src: url('http://predict.lyon-forums.com/style/fonts/Oswald_Bold.otf');
}

相关网站（仍为主页）如下：http://predict.lyon-forums.com/

这是网站（请注意顶部菜单）的样子（因为它显示在我计算机上的Chrome上）：

在运行Chrome的其他计算机上，问题仍然存在。这就是Opera在网站上的样子：

该字体被称为“苦涩”，＆＃39;并且问题在Firefox中仍然存在。

我将不胜感激任何帮助：）

编辑：在另一个Stack Overflow问题上，我发现如果字体已经存在，那么就会从PC上写出字体，但是我从计算机上删除了它们。

Answer 1

这是因为每个浏览器都有自己的字体渲染引擎，它们都是不同的，可以在以后的版本中更改，也可以在不同的操作系统中进行更改。

尝试在你的css中使用：

-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;

如果是Chrome，则可以使用this，但这可能会导致其他浏览器出现问题。