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