摘要:如何使用字體平滑顯示呢要知道,對中字體的抗鋸齒渲染是有過考慮的,如,不過可能由于不同操作系統(tǒng)以及瀏覽器內(nèi)核對字體的渲染存在差異,總之,他并沒有被選入標準。經(jīng)過測試發(fā)現(xiàn),瀏覽器的內(nèi)置基礎(chǔ)屬性中一般已經(jīng)包含了字體抗鋸齒。
在圍觀Drupal官方主題的時候,發(fā)現(xiàn)了一個有意思的非標準CSS選擇器-webkit-font-smoothing,于是上手把玩了一番。如何使用css3字體平滑顯示呢
要知道,W3C對CSS中字體的抗鋸齒渲染是有過考慮的,如font-smooth,不過可能由于不同操作系統(tǒng)以及瀏覽器內(nèi)核對字體的渲染存在差異,總之,他并沒有被選入Web標準。但是WebKit還是保留了一套自有的非標準選擇器來實現(xiàn)對抗鋸齒效果的支持,來讓字體顯示的更加平滑。
-webkit-font-smoothing主要有一下三個屬性:
none: 無抗鋸齒
subpixel-antialiased (default): 次像素平滑 常見于Mac OS和MacType For Windows
antialiased: 灰度平滑 常用于Android和iOS等移動設(shè)備的
不過經(jīng)過嘗試,我的木頭眼睛完全分辨不出后兩個的區(qū)別。 而且這個非標準的CSS只適用于大多數(shù)的手機瀏覽器及Safari和Chrome之類的WebKit內(nèi)核的桌面瀏覽器。至于IE系列嘛,你自己不支持,怪我咯~
這里看看實際效果吧,首先是沒有采用抗鋸齒渲染的:
接下來是采用-webkit-font-smoothing: subpixel-antialiased抗鋸齒渲染平滑處理后的效果:
可以看出來,字體邊緣的光滑程度還是不一樣的,加上后確實好看了不少。
經(jīng)過測試發(fā)現(xiàn),瀏覽器的內(nèi)置基礎(chǔ)屬性中一般已經(jīng)包含了字體抗鋸齒。但是為了保險起見,還是手動加上一個吧~
我的個人博客,里面會有各種有意思的東西哦,歡迎關(guān)注。iamkun.com
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/86895.html
摘要:如何使用字體平滑顯示呢要知道,對中字體的抗鋸齒渲染是有過考慮的,如,不過可能由于不同操作系統(tǒng)以及瀏覽器內(nèi)核對字體的渲染存在差異,總之,他并沒有被選入標準。經(jīng)過測試發(fā)現(xiàn),瀏覽器的內(nèi)置基礎(chǔ)屬性中一般已經(jīng)包含了字體抗鋸齒。 在圍觀Drupal官方主題的時候,發(fā)現(xiàn)了一個有意思的非標準CSS選擇器-webkit-font-smoothing,于是上手把玩了一番。如何使用css3字體平滑顯示呢 s...
摘要:如何使用字體平滑顯示呢要知道,對中字體的抗鋸齒渲染是有過考慮的,如,不過可能由于不同操作系統(tǒng)以及瀏覽器內(nèi)核對字體的渲染存在差異,總之,他并沒有被選入標準。經(jīng)過測試發(fā)現(xiàn),瀏覽器的內(nèi)置基礎(chǔ)屬性中一般已經(jīng)包含了字體抗鋸齒。 在圍觀Drupal官方主題的時候,發(fā)現(xiàn)了一個有意思的非標準CSS選擇器-webkit-font-smoothing,于是上手把玩了一番。如何使用css3字體平滑顯示呢 s...
摘要:書體宋體仿宋體黑體等例如自帶的宋體實為中易宋體。傳統(tǒng)上說的等線體以當代視角來看通常是較為幼細的黑體。前面的過程我們稱之為編碼,后面的這個過程我們稱之為解碼。部分瀏覽器比如可以選擇編碼自動檢測功能,使用基于統(tǒng)計的方法判斷未定編碼。 準備工作 字符 - Character 字母、數(shù)字、漢字、符號等,是一種抽象實體。 字形 - Glyph 單個「字符」的具體表達,一個字可有多個不同的字形。 ...
摘要:它有三個屬性值對低像素的文本比較好默認值抗鋸齒很好具體代碼這個屬性也是更清晰的作用。具體代碼和實現(xiàn)樣式布局橫線實現(xiàn),在標簽中可以使用刪除線實現(xiàn)可以使用標簽實現(xiàn)優(yōu)惠價格元,原價元實現(xiàn),使用優(yōu)惠價格元,原價元 css3屬性-webkit-font-smoothing ??對字體進行抗鋸齒渲染可以使字體看起來會更清晰舒服。在圖標字體成為一種趨勢的今天,抗鋸齒渲染使用也越來越多。font-sm...
閱讀 3451·2019-08-30 10:54
閱讀 3147·2019-08-29 16:38
閱讀 2166·2019-08-26 14:06
閱讀 1512·2019-08-23 15:39
閱讀 3034·2019-08-23 15:37
閱讀 2883·2019-08-23 13:50
閱讀 3190·2019-08-22 17:14
閱讀 2376·2019-08-22 15:44