9px,360極速，Chrome瀏覽器不支持12px以下字體的解決方案

中文版Chrome瀏覽器不支持12px以下字體的解決方案

Chrome 27之前的中文版桌面瀏覽器會(huì)默認(rèn)設(shè)定頁面的最小字號(hào)是12px，英文版則沒有限制，主要是因?yàn)閏hrome認(rèn)為漢字小于12px就會(huì)增加識(shí)別難度，尤其是中文常用的宋體和微軟雅黑。而我們在實(shí)際項(xiàng)目中，對(duì)于數(shù)字/英文內(nèi)容，其他字體的文本可能會(huì)有特殊的需求要求它們以更小的字號(hào)來顯示，這個(gè)時(shí)候就需要取消瀏覽器的自動(dòng)調(diào)整功能了。

一般解決方案是禁止webkit瀏覽器配置調(diào)整網(wǎng)頁的字體大小。如下CSS定義方式：

.classstyle{ -webkit-text-size-adjust:none; font-size:9px; }

再講一下text-size-adjust屬性，該屬性用來設(shè)定文字大小是否根據(jù)設(shè)備(瀏覽器)來自動(dòng)調(diào)整顯示大小，safari 3.0+，chrome 1.0+可以支持。屬性值，可以為三種：

percentage：字體顯示的大��；
auto：默認(rèn)，字體大小會(huì)根據(jù)設(shè)備/瀏覽器來自動(dòng)調(diào)整；
none:字體大小不會(huì)自動(dòng)調(diào)整

據(jù)說該屬性最初專門是為iPhone版safari設(shè)計(jì)的，用來自動(dòng)調(diào)整普通網(wǎng)頁在iPhone手機(jī)端字體的展現(xiàn)問題，不過，既然是webkit的私有屬性，現(xiàn)在也經(jīng)常用在webkit內(nèi)核的桌面瀏覽器限制頁面展示。實(shí)際上，這是webkit的一個(gè)bug。在最新版的Chrome已經(jīng)修復(fù)。

需要注意的是，不合理的使用-webkit-text-size-adjust:none會(huì)造成許多不好的影響。比如將其定義為全局屬性的話，在Chrome中當(dāng)用戶放大縮小頁面（PC上按住Ctrl滾動(dòng)鼠標(biāo)滾輪可縮放網(wǎng)頁）的時(shí)候，文字卻維持定義的大小而不放縮，給用戶帶來的不太友好的體驗(yàn)。所以我們在使用時(shí)，最好定義為局部有效，而不要圖省事一句html{-webkit-text-size-adjust:none;}了事。

由于沒有 -o-text-size-adjust，這樣的CSS 屬性，在 Opera，我們就只能通過自己手動(dòng)設(shè)置了：工具->首選項(xiàng)->高級(jí)->字體->最小字體大�。ㄏ袼兀�。

PC桌面版Chrome 27正式取消了-webkit-text-size-adjust屬性的支持，實(shí)際上是修正了原有的bug。如果定義該屬性在Chrome調(diào)試窗口會(huì)顯示Unknown property name，所有字號(hào)最小為12px。但是，移動(dòng)端chrome/safari目前依然支持-webkit-text-size-adjust屬性。因?yàn)榇藢傩缘臑E用會(huì)使得webkit內(nèi)核的瀏覽器失去調(diào)節(jié)能力，對(duì)于有視覺障礙的瀏覽者非常不友好（尤其是移動(dòng)終端），那么現(xiàn)在該如何實(shí)現(xiàn)原來的需求呢？
我們可以嘗試通過對(duì)文字區(qū)域局部應(yīng)用以下樣式解決：

.chrome_adjust {    font-size: 9px;    -webkit-transform: scale(0.75);}

12×0.75=9，對(duì)于其它瀏覽器來說，12px以下的字號(hào)都是可以識(shí)別的，這里僅需要對(duì)于Chrome瀏覽器進(jìn)行縮放�？墒侨绾畏直媸荢afari還是Chrome，目前尚沒有有效的CSS hack�？梢酝ㄟ^javascript來判斷是否為Chrome。判斷方法：var isChrome = !!window.chrome;當(dāng)檢測為Chrome的時(shí)候，將.chrome_adjust這個(gè)類添加到對(duì)應(yīng)的標(biāo)簽。

但是，問題還沒有解決�？吹骄W(wǎng)頁在三種瀏覽器的不同表現(xiàn)：

1）、Chrome下由于啟用了縮放，所以字符間距出現(xiàn)問題，影響了美觀，這時(shí)候如果追求完美，可能你還會(huì)想到j(luò)s判斷為Chrome后再用CSS屬性letter-spacing去修復(fù)；

2）、Firefox不認(rèn)識(shí)-webkit，所以表現(xiàn)正常，9px；

3）、Opera 12.5+能夠識(shí)別-webkit-前綴（Opera 12.15版本，內(nèi)核暫未更換為webkit，但是已能夠識(shí)別-webkit-前綴了，而且在檢查元素時(shí)還抹掉了前綴），但又能夠顯示12px以下的字號(hào)，結(jié)果變成了9×0.75，影響了肉眼的識(shí)別，這時(shí)候，又得給opera添加-o-transform: scale(1);這個(gè)屬性。

.chrome_adjust {    font-size: 9px;    -webkit-transform: scale(0.75);    -o-transform: scale(1);    //針對(duì)能識(shí)別-webkit的opera browser設(shè)置}

其實(shí)，源自挪威的Opera一貫使用自己的引擎(Presto)，但經(jīng)常造成一些所謂的“兼容性問題”。在越來越多網(wǎng)站針對(duì)WebKit優(yōu)化的情況下，Opera的對(duì)策就是，引入一些WebKit引擎的前綴屬性，以避免開發(fā)者因?yàn)榫W(wǎng)頁屬性選擇而影響Opera功能的發(fā)揮。Opera 12.50將是其第一個(gè)支持Webkit屬性的桌面瀏覽器，包括-webkit-linear-gradient、-o-linear-gradient兩種不同類型。移動(dòng)版本也會(huì)使用同樣的核心。相關(guān)測試的開發(fā)人員可以下載模擬器Opera Mobile Emulator——Windows、Linux、Mac版本。

引用仇童鞋的話總結(jié)一下：

-webkit-text-size-adjust 的本職是用于mobile的，見規(guī)范：

CSS Mobile Text Size Adjustment Module Level 1 （訪問http://dev.w3.org/csswg/css-size-adjust/）

Apple 開發(fā)社區(qū)的 Safari Web Content Guide（訪問http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW16）

之所以現(xiàn)在的桌面版webkit瀏覽器支持他，是因?yàn)閷?shí)際上這是一下bug。

Bug 56543 – CSS property "-webkit-text-size-adjust" means different things in Safari and iOS（訪問https://bugs.webkit.org/show_bug.cgi?id=56543）

這個(gè)bug在最新版的 WebKit Nightly Builds 里已經(jīng)被修復(fù)了。

這屬性現(xiàn)在的一般用處是防止iPhone在堅(jiān)屏轉(zhuǎn)向橫屏?xí)r放大文字（注意，就算viewport設(shè)置了maximum-scale=1.0 文字還是會(huì)放大的）。

而且iPhone和iPad的默認(rèn)設(shè)定是不一樣的：

iPhone默認(rèn)設(shè)定 -webkit-text-size-adjust: auto;

iPad默認(rèn)設(shè)定 -webkit-text-size-adjust: none;

所以iPad默認(rèn)是不調(diào)節(jié)的。

此屬性還支持百分比，這在當(dāng)前的桌面版的webkit瀏覽器是不支持的，所以如果不想讓iPhone橫堅(jiān)屏切換的時(shí)候調(diào)節(jié)文字，用 -webkit-text-size-adjust: 100%;

絕對(duì)不能用 -webkit-text-size-adjust: none; 這會(huì)導(dǎo)致仍然支持 -webkit-text-size-adjust: none;的桌面版的webkit瀏覽器無法人為放大文字大小，嚴(yán)重影響可用性。

最后總結(jié)一下：對(duì)于www web站點(diǎn)，完全沒有必要使用-webkit-text-size-adjust屬性，因?yàn)樽烂姘嫫聊豢臻g比較大，12px滿足大部分需求場所，沒有必要非設(shè)為12px以下的字體，除非有特殊需求。在手機(jī)等移動(dòng)端web頁面，由于webkit瀏覽器支持設(shè)置小于12px的字體，雖然瀏覽器依然保留了對(duì)該屬性的支持，但我們完全沒有必要使用。

所以結(jié)論就是在萬不得已需要使用-webkit-text-size-adjust的情況下，一定要寫作-webkit-text-size-adjust: 100%; 。因?yàn)榇藢懛ㄖ挥衜obile版支持（本人iOS 下safari/chrome均測試通過），而Chrome 27+和其他低版本的桌面版webkit瀏覽器，都不識(shí)別，也不會(huì)有設(shè)為none對(duì)視覺障礙用戶不能放縮的負(fù)面影響。