@ font-face查询的奇怪问题

Question

使用以下代码以特殊字体显示H1项目。

@font-face {
font-family: 'Serif-semi-bold';
src: url('http://www.jaguarseascouts.org.uk/wp-content/themes/molesey/fonts/TheSerifSemiBold-Plain.ttf'); /* IE9 Compat Modes */ 
}

在IE，Firefox等中显示效果很好但在Chrome中看起来非常粗糙和差。

为什么会这样？

非常感谢

Answer 1

大多数现代浏览器使用.woff字体，因此您可能也希望包含该字体。另一方面，Chrome通常在渲染字体方面做得非常糟糕。

Answer 2

现在有很多方法可以在大多数浏览器中清理字体。

将其插入到CSS中，这将有助于大多数字体：

html {
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale;
}

如果该特定字体有问题，您可以下载，上传并在fontsquirrel.com转换它 - 它会在转换后为您提供代码和多种不同的字体格式。