字體最小值

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

Chrome 27以前的中文版桌面瀏覽器會默認設定頁面的最小字號是12px，英文版則沒有限制，主要是由於chrome認爲漢字小於12px就會增長識別難度，尤爲是中文經常使用的宋體和微軟雅黑。而咱們在實際項目中，對於數字/英文內容，其餘字體的文本可能會有特殊的需求要求它們以更小的字號來顯示，這個時候就須要取消瀏覽器的自動調整功能了。

通常解決方案是禁止webkit瀏覽器配置調整網頁的字體大小。以下CSS定義方式：
[css] view plaincopy
.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。若是定義該屬性在Chrome調試窗口會顯示Unknown property name，全部字號最小爲12px。可是，移動端chrome/safari目前依然支持-webkit-text-size-adjust屬性。由於此屬性的濫用會使得webkit內核的瀏覽器失去調節能力，對於有視覺障礙的瀏覽者很是不友好（尤爲是移動終端），那麼如今該如何實現原來的需求呢？
咱們能夠嘗試經過對文字區域局部應用如下樣式解決：

[css] view plaincopy
.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去修復；-webkit-transform-origin-x:0;
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 plaincopy
.chrome_adjust {
font-size: 9px;
-webkit-transform: scale(0.75);
-o-transform: scale(1); //針對能識別-webkit的opera browser設置

-webkit-transform-origin-x:0; //能解決文字縮小產生的間距; 
}

 

其實，源自挪威的Opera一向使用本身的引擎(Presto)，但常常形成一些所謂的「兼容性問題」。在愈來愈多網站針對WebKit優化的狀況下，Opera的對策就是，引入一些WebKit引擎的前綴屬性，以免開發者由於網頁屬性選擇而影響Opera功能的發揮。Opera 12.50將是其第一個支持Webkit屬性的桌面瀏覽器，包括-webkit-linear-gradient、-o-linear-gradient兩種不一樣類型。移動版本也會使用一樣的核心。相關測試的開發人員能夠下載模擬器Opera Mobile Emulator——Windows、Linux、Mac版本。