我喜歡在我的商業作品中使用Google Webfonts,但它們呈現得有點過於鋸齒,但在Google提供的預覽中,它們渲染得非常流暢。Google Webfonts和反鋸齒
檢查了這一點: http://www.google.com/fonts/specimen/Oxygen
最大的預覽看起來非常漂亮和流暢,但是當我將其導入我的網頁上,並使用它,它似乎扭曲的邊緣,非常參差不齊。谷歌是否使用額外的庫來實現這種反鋸齒或者我是否做錯了什麼?
我喜歡在我的商業作品中使用Google Webfonts,但它們呈現得有點過於鋸齒,但在Google提供的預覽中,它們渲染得非常流暢。Google Webfonts和反鋸齒
檢查了這一點: http://www.google.com/fonts/specimen/Oxygen
最大的預覽看起來非常漂亮和流暢,但是當我將其導入我的網頁上,並使用它,它似乎扭曲的邊緣,非常參差不齊。谷歌是否使用額外的庫來實現這種反鋸齒或者我是否做錯了什麼?
如果您從系統(windows/fonts文件夾)中卸載字體,您應該能夠順利看到它。 爲了克服這一點。不要使用@import或谷歌的直接鏈接。 寧可從www.fontsquirrel.com(整個網絡字體工具包)下載軟件包,並在css中使用@ font-face以獲得流暢的字體。
字體渲染不同的基礎上:
你的字體在Chrome和Firefox中,看起來更糟糕的是,您可以嘗試讓這些瀏覽器更好地呈現它們。沒有看到你的代碼的唯一的東西,我可以建議是:
確保您使用的是體面的復位CSS(是這樣的:http://meyerweb.com/eric/tools/css/reset/)。
嘗試將font-weight: normal;
添加到字體以查看是否有所作爲;有時瀏覽器和框架嘗試添加一個虛假的大膽事物。
確保您使用的是實際版本的字體,而不僅僅是應用CSS樣式。
如果一切都失敗了,那麼嘗試將字體大小向上/向下顛倒一點點,看看字體是否對這些尺寸有更好的提示。
希望這有助於!
'font-weight:normal;'在使用自定義.woff字體的Chrome 31測試版中,我的情況有了很大的不同。謝謝! –
我並不瞭解完整的技術細節,但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修復程序,但我找不到任何有關這方面的信息)。
進一步閱讀:
-webkit-font-smoothing
demo上Codepen。希望我能幫上忙。 :)
需要一些代碼來告訴什麼是錯的....! –
你在你的網站上使用哪種字體大小的字體? –
例子?你還使用什麼操作系統,瀏覽器和屏幕? 所有這些因素都有助於字體渲染。 – Stuart