CSS中的自定義字體是讓網頁設計師更加靈活地控制字體樣式的好方法,但是有時在使用自定義字體時會出現一些鋸齒的問題,怎樣解決呢?
@font-face { font-family: 'MyFont'; src: url('myfont.eot'); src: url('myfont.eot?#iefix') format('embedded-opentype'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'), url('myfont.svg#MyFont') format('svg'); font-weight: normal; font-style: normal; } body { font-family: 'MyFont', sans-serif; }
首先,要保證使用的字體文件是高質量的,如果字體文件質量太低,就會出現鋸齒的問題。其次,要使用適當的字體渲染技術,如字體平滑(字體抗鋸齒渲染),用CSS屬性-webkit-font-smoothing
或-moz-osx-font-smoothing
。
body { font-family: 'MyFont', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
最后,要注意瀏覽器兼容性,不同的瀏覽器對字體渲染的支持程度不同。要選擇適用于不同瀏覽器的通用字型(Fallback)。
總之,CSS中使用自定義字體要注意以上三點,才能避免出現鋸齒問題,達到更好的字體效果。
上一篇ajax異步出現數據丟失
下一篇css自定義字體包