2013-04-18 135 views
6

我喜歡在我的商業作品中使用Google Webfonts,但它們呈現得有點過於鋸齒,但在Google提供的預覽中,它們渲染得非常流暢。Google Webfonts和反鋸齒

檢查了這一點: http://www.google.com/fonts/specimen/Oxygen

最大的預覽看起來非常漂亮和流暢,但是當我將其導入我的網頁上,並使用它,它似乎扭曲的邊緣,非常參差不齊。谷歌是否使用額外的庫來實現這種反鋸齒或者我是否做錯了什麼?

+0

需要一些代碼來告訴什麼是錯的....! –

+0

你在你的網站上使用哪種字體大小的字體? –

+0

例子?你還使用什麼操作系統,瀏覽器和屏幕? 所有這些因素都有助於字體渲染。 – Stuart

回答

4

如果您從系統(windows/fonts文件夾)中卸載字體,您應該能夠順利看到它。 爲了克服這一點。不要使用@import或谷歌的直接鏈接。 寧可從www.fontsquirrel.com(整個網絡字體工具包)下載軟件包,並在css中使用@ font-face以獲得流暢的字體。

2

字體渲染不同的基礎上:

  • 屏幕/顯示器分辨率
  • 瀏覽器
  • 操作系統
  • 使用的大小和基於這樣的事實暗示

你的字體在Chrome和Firefox中,看起來更糟糕的是,您可以嘗試讓這些瀏覽器更好地呈現它們。沒有看到你的代碼的唯一的東西,我可以建議是:

  • 確保您使用的是體面的復位CSS(是這樣的:http://meyerweb.com/eric/tools/css/reset/)。

  • 嘗試將font-weight: normal;添加到字體以查看是否有所作爲;有時瀏覽器和框架嘗試添加一個虛假的大膽事物。

  • 確保您使用的是實際版本的字體,而不僅僅是應用CSS樣式。

  • 如果一切都失敗了,那麼嘗試將字體大小向上/向下顛倒一點點,看看字體是否對這些尺寸有更好的提示。

希望這有助於!

+0

'font-weight:normal;'在使用自定義.woff字體的Chrome 31測試版中,我的情況有了很大的不同。謝謝! –

1

我並不瞭解完整的技術細節,但Chrome可能會呈現與其他瀏覽器不同的字體。

你可以嘗試的是在你的CSS文件中指定一個font-smoothing規則。

p { 
    -webkit-font-smoothing: antialiased; 
} 

該規則經常使用。有時,人們也適用於每一個選擇(與*):

* { 
    -webkit-font-smoothing: antialiased; 
} 

此屬性的三個可能的值是:

-webkit-font-smoothing: none; 
-webkit-font-smoothing: subpixel-antialiased; 
-webkit-font-smoothing: antialiased; 

不幸的是,我現在無法重現平滑的問題(我不知道爲什麼,我的電腦沒有改變平滑度,一切都完全可讀,也許是最近的Chrome修復程序,但我找不到任何有關這方面的信息)。

進一步閱讀:

希望我能幫上忙。 :)