首頁 > web前端 > css教學 > 主體

CSS3中字體平滑處理與抗鋸齒渲染

高洛峰
發布: 2017-02-22 13:12:04
原創
1525 人瀏覽過

在圍觀Drupal官方主題的時候,發現了一個有意思的非標準CSS選擇器-webkit-font-smoothing#,於是上手把玩了一番。如何使用css3字體平滑顯示呢 

要知道,W3C對CSS中字體的抗鋸齒渲染是有過考慮的,如font-smooth,不過可能由於不同操作系統以及瀏覽器內核對字體的渲染存在差異,總之,他並沒有被選入Web標準。但WebKit還是保留了一套自有的非標準選擇器來實現對抗鋸齒效果的支持,來讓字體顯示的更加平滑。

-webkit-font-smoothing主要有一下三個屬性:

  • none: 無抗鋸齒

  • ##subpixel-antialiased (default): 次像素平滑常見於Mac OS和MacType For Windows

  • antialiased: 灰階平滑常用於Android和iOS等行動裝置的

不過經過嘗試,我的木頭眼睛完全分辨不出後兩個的差異。

而且這個非標準的CSS只適用於大多數的手機瀏覽器及Safari和Chrome之類的WebKit核心的桌面瀏覽器。至於IE系列嘛,你自己不支持,怪我咯~CSS3中字體平滑處理與抗鋸齒渲染CSS3中字體平滑處理與抗鋸齒渲染

這裡看看實際效果吧,首先是沒有採用抗鋸齒渲染的:

CSS3中字体平滑处理和抗锯齿渲染

接下來是採用

-webkit-font-smoothing: subpixel-antialiased抗鋸齒渲染平滑處理後的效果:

CSS3中字体平滑处理和抗锯齿渲染

可以看出來,字體邊緣的光滑程度還是不一樣的,加上後確實好看了不少。

經過測試發現,瀏覽器的內建基礎屬性中一般已經包含了字體抗鋸齒。但為了保險起見,還是手動加上一個吧

更多CSS3中字體平滑處理和抗鋸齒渲染 相關文章請關注PHP中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!