如何处理跨浏览器显示不同的字体

Question

我们正在使用来自文件“TitilliumWeb-Regular.ttf”的主菜单导航项目上的Titlium字体。

Firefox中的字体与Chrome中的字体有何不同？当我比较它们时，我似乎发现一个看起来相当锯齿。这只是标准的浏览器行为还是有什么我可以做些改进呢？

有问题的网站是在这里 - http://www.microserveltd.co.uk

Answer 1

它们之间的区别，因为Windows浏览器中实现自己的光栅化引擎，以矢量字体转换为像素 - >不同的实现方式=不同的结果。 WebKit的一个简单解决方法是将-webkit-font-smoothing:antialiased添加到您的字体声明中，但应该谨慎使用，对于非WebKit浏览器显然无效。 此外，您只提供.ttf字体格式，如果您提供多种类型的文件，您将获得更好的跨浏览器/跨平台性能。你可以在font squirrel生成@ font-face样式，你可以在这里阅读OTF vs TTF的值：http://blogs.adobe.com/typblography/2010/12/the-benefits-of-opentypecff-over-truetype.html