中文版Chrome瀏覽器不支持12px以下字體的解決方案
中文版Chrome瀏覽器不支持12px以下字體的解決方案
http://blog.csdn.net/freshlover/article/details/9746821
Chrome 27之前的中文版桌面瀏覽器會默認設定頁面的最小字號是12px，英文版則沒有限制，主要是因為chrome認為漢字小於12px就會增加識別難度，尤其是中文常用的宋體和微軟雅黑。而我們在實際項目中，對於數字/英文內容，其他字體的文本可能會有特殊的需求要求它們以更小的字號來顯示，這個時候就需要取消瀏覽器的自動調整功能了。
一般解決方案是禁止webkit瀏覽器配置調整網頁的字體大小。如下CSS定義方式：
[css] view plain copy- .classstyle{ -webkit-text-size-adjust:none; font-size:9px; }
再講一下text-size-adjust屬性，該屬性用來設定文字大小是否根據設備(瀏覽器)來自動調整顯示大小，safari 3.0+，chrome 1.0+可以支持。屬性值，可以為三種：
percentage：字體顯示的大小；
auto：默認，字體大小會根據設備/瀏覽器來自動調整；
none:字體大小不會自動調整
據說該屬性最初專門是為iPhone版safari設計的，用來自動調整普通網頁在iPhone手機端字體的展現問題，不過，既然是webkit的私有屬性，現在也經常用在webkit內核的桌面瀏覽器限制頁面展示。實際上，這是webkit的一個bug。在最新版的Chrome已經修復。
需要註意的是，不合理的使用-webkit-text-size-adjust:none會造成許多不好的影響。比如將其定義為全局屬性的話，在Chrome中當用戶放大縮小頁面（PC上按住Ctrl滾動鼠標滾輪可縮放網頁）的時候，文字卻維持定義的大小而不放縮，給用戶帶來的不太友好的體驗。所以我們在使用時，最好定義為局部有效，而不要圖省事一句html{-webkit-text-size-adjust:none;}了事。
由於沒有 -o-text-size-adjust，這樣的CSS 屬性，在 Opera，我們就只能通過自己手動設置了：工具->首選項->高級->字體->最小字體大小（像素）。
PC桌面版Chrome 27正式取消了-webkit-text-size-adjust屬性的支持，實際上是修正了原有的bug。
我們可以嘗試通過對文字區域局部應用以下樣式解決：
[css] view plain copy
- .chrome_adjust {
- font-size: 9px;
- -webkit-transform: scale(0.75);
- }
12×0.75=9，對於其它瀏覽器來說，12px以下的字號都是可以識別的，這裏僅需要對於Chrome瀏覽器進行縮放。可是如何分辨是Safari還是Chrome，目前尚沒有有效的CSS hack。可以通過javascript來判斷是否為Chrome。判斷方法：var isChrome = !!window.chrome;當檢測為Chrome的時候，將.chrome_adjust這個類添加到對應的標簽。
但是，問題還沒有解決。看到網頁在三種瀏覽器的不同表現：
1）、Chrome下由於啟用了縮放，所以字符間距出現問題，影響了美觀，這時候如果追求完美，可能你還會想到js判斷為Chrome後再用CSS屬性letter-spacing去修復；
2）、Firefox不認識-webkit，所以表現正常，9px；
3）、Opera 12.5+能夠識別-webkit-前綴（Opera 12.15版本，內核暫未更換為webkit，但是已能夠識別-webkit-前綴了，而且在檢查元素時還抹掉了前綴），但又能夠顯示12px以下的字號，結果變成了9×0.75，影響了肉眼的識別，這時候，又得給opera添加-o-transform: scale(1);這個屬性。
[css] view plain copy
- .chrome_adjust {
- font-size: 9px;
- -webkit-transform: scale(0.75);
- -o-transform: scale(1); //針對能識別-webkit的opera browser設置
- }
其實，源自挪威的Opera一貫使用自己的引擎(Presto)，但經常造成一些所謂的“兼容性問題”。在越來越多網站針對WebKit優化的情況下，Opera的對策就是，引入一些WebKit引擎的前綴屬性，以避免開發者因為網頁屬性選擇而影響Opera功能的發揮。Opera 12.50將是其第一個支持Webkit屬性的桌面瀏覽器，包括-webkit-linear-gradient、-o-linear-gradient兩種不同類型。移動版本也會使用同樣的核心。相關測試的開發人員可以下載模擬器Opera Mobile Emulator——Windows、Linux、Mac版本。
引用仇童鞋的話總結一下：
-webkit-text-size-adjust 的本職是用於mobile的，見規範：
CSS Mobile Text Size Adjustment Module Level 1 （訪問http://dev.w3.org/csswg/css-size-adjust/）
Apple 開發社區的 Safari Web Content Guide（訪問http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW16）
之所以現在的桌面版webkit瀏覽器支持他，是因為實際上這是一下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）
這個bug在最新版的 WebKit Nightly Builds 裏已經被修復了。
這屬性現在的一般用處是防止iPhone在堅屏轉向橫屏時放大文字（註意，就算viewport設置了maximum-scale=1.0 文字還是會放大的）。
而且iPhone和iPad的默認設定是不一樣的：
iPhone默認設定 -webkit-text-size-adjust: auto;
iPad默認設定 -webkit-text-size-adjust: none;
所以iPad默認是不調節的。
此屬性還支持百分比，這在當前的桌面版的webkit瀏覽器是不支持的，所以如果不想讓iPhone橫堅屏切換的時候調節文字，用 -webkit-text-size-adjust: 100%;
絕對不能用 -webkit-text-size-adjust: none; 這會導致仍然支持 -webkit-text-size-adjust: none;的桌面版的webkit瀏覽器無法人為放大文字大小，嚴重影響可用性。
最後總結一下：對於www web站點，完全沒有必要使用-webkit-text-size-adjust屬性，因為桌面版屏幕空間比較大，12px滿足大部分需求場所，沒有必要非設為12px以下的字體，除非有特殊需求。在手機等移動端web頁面，由於webkit瀏覽器支持設置小於12px的字體，雖然瀏覽器依然保留了對該屬性的支持，但我們完全沒有必要使用。
所以結論就是在萬不得已需要使用-webkit-text-size-adjust的情況下，一定要寫作-webkit-text-size-adjust: 100%; 。因為此寫法只有mobile版支持（本人iOS 下safari/chrome均測試通過），而Chrome 27+和其他低版本的桌面版webkit瀏覽器，都不識別，也不會有設為none對視覺障礙用戶不能放縮的負面影響。
中文版Chrome瀏覽器不支持12px以下字體的解決方案