如何處理跨瀏覽器顯示不同的字體

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