CHROME 最小字體限制為12PX的終極解決方案
本文由五月雨戀提供，轉載請注明出處。
相信不少做網站的用戶會有這樣一個問題，Chrome 默認最小字體是12px（最新版英文也有此問題），這個是 Chrome 為了更好顯示中文設計的，但是這樣一來就會出現某些上標、下標字體過大，影響用戶體驗。鑒於本人發文不多，文采欠佳。就直接上解決方案了，希望能給以網友幫助。
先上圖，然后上代碼
-效果圖
-源碼
1 <!doctype html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>解決 CHROME 最小字體為12PX</title> 6 <link rel="stylesheet" href="css/base.css"> 7 <style type="text/css"> 8 .fz6{ 9 font-size: 6px; 10 } 11 .fz12{ 12 font-size: 12px; 13 line-height: 20px; 14 } 15 @media screen and (-webkit-min-device-pixel-ratio:0) { 16 .-webkit-fz6-box{ 17 width: 400px; 18 } 19 .-webkit-fz6{ 20 /* defout most smallest:12px*/ 21 -webkit-font-size: 12px; 22 -webkit-line-height: 20px; 23 /* 字體縮放12×0.5= 6px, 24 translate調整位置 25 取父級盒子寬度的負50% -400px * 50% = -200px*/ 26 -webkit-transform: scale(0.5) translate(-200px,0px) ; 27 /* -ms-transform: ; 28 -o-transform: ; 29 transform: ; 30 -webkit-min-device-pixel-ratio:0;*/ 31 -webkit-letter-spacing: 1px; 32 } 33 } 34 .box-fieldset{ 35 width: 400px; 36 height: 40px; 37 font-size: 16px; 38 line-height: 28px; 39 } 40 .fieldset{ 41 border-top: 1px solid #ccc; 42 border-right:0px; 43 border-bottom: 0px; 44 border-left: 0px; 45 } 46 .legend-txt-c{ 47 text-align: center; 48 } 49 .sub,.sup{ 50 font-size: 8px; 51 line-height: 14px; 52 } 53 @media screen and (-webkit-min-device-pixel-ratio:0) { 54 /* 針對Google Chrome、Safari 3.0、Opera 9 的CSS樣式 */ 55 .-webkit-w16{ 56 width: 16px; 57 display: inline-block; 58 } 59 .-webkit-sub,.-webkit-sup{ 60 -webkit-transform: scale(0.5) translate(-8px,0px) ; 61 /* -ms-transform: ; 62 -o-transform: ; 63 transform: ; 64 -webkit-min-device-pixel-ratio:0;*/ 65 -webkit-letter-spacing: 1px; 66 } 67 } 68 @-moz-document url-prefix() { 69 /* 針對Firefox的CSS樣式 */ 70 .-moz-sub,.-moz-sup{ 71 position: relative; 72 } 73 .-moz-sub-span{ 74 position: relative; 75 top: -8px; 76 } 77 .-moz-sup-span{ 78 position: relative; 79 top: 0px; 80 } 81 } 82 83 </style> 84 </head> 85 <body> 86 <p class="fz12">這段話的實際字體大小為12px，幾乎所有主流瀏覽器都能正常識別</p> 87 <p class="fz6">這段話的實際字體大小6px，Chrome 默認最小字體是12px，這是Chrome為了更好顯示中文設計的。但是這樣一來就會出現某些上標、下標字體過大，影響用戶體驗。（例如2<sup>2</sup>,CO<sub>2</sub>）</p> 88 <div class="-webkit-fz6-box"> 89 <p class="fz6 -webkit-fz6">這段話的實際字體大小6px。已經解決CHROME瀏覽器不能正常顯示的問題</p> 90 </div> 91 <div class="box-fieldset"> 92 <fieldset class="fieldset"> 93 <legend class="legend-txt-c">使用場景</legend> 94 <p>《高中化學》 95 二氧化碳：CO<sub class="sub -moz-sub"><span class="-webkit-w16 -webkit-sub -moz-sub-span">2</span></sub>； 96 水：H<sub class="sub -moz-sub"><span class="-webkit-w16 -webkit-sub -moz-sub-span">2</span></sub>O； 97 氫氣：H<sub class="sub -moz-sub"><span class="-webkit-w16 -webkit-sub -moz-sub-span">2</span></sub>； 98 </p> 99 <p>《高中數學》 100 2<sup class="sup -moz-sup"><span class="-webkit-w16 -webkit-sup -moz-sup-span">2</span></sup>； 101 10<sup class="sup -moz-sup"><span class="-webkit-w16 -webkit-sup -moz-sup-span">2</span></sup>； 102 2<sup class="sup -moz-sup"><span class="-webkit-w16 -webkit-sup -moz-sup-span">10</span></sup>； 103 </p> 104 </fieldset> 105 </div> 106 107 </body> 108 </html>
最后提供Demo下載：http://yunpan.cn/cZyATmRAZ4Xgi （提取碼：6fe5）