卡卡网是专业的网站测速平台，网速测试，测试网站速度，就来卡卡网 ~
 |  |  |
 |  |  |
|
對于Chrome瀏覽器，默認(rèn)情況下，12px已經(jīng)是網(wǎng)頁字體的最小大小了，但是我們有時想把頁面某個模塊的字體大小設(shè)置得更小，小到小于12px，那該怎么辦呢？現(xiàn)在問題解決了，所有瀏覽器測試有效(包括Chrome)，把字體設(shè)置小于12px。
完整HTML代碼
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title></title>
- <style type="text/css">
- div.div1{
- font-size:12px;
- }
- div.div2{
- font-size:8px;
- transform:scale(0.8) translate(-240px,0);
- }
- /* firefox */
- @-moz-document url-prefix(){
- div.div2{
- transform:scale(1.0);
- }
- }
- /* IE11+ */
- @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
- div.div2{
- transform:scale(1.0);
- }
- }
- </style>
- </head>
- <body>
- <div class="div1">
- 卡卡網(wǎng) gazebo2go.com
- </div>
- <div class="div2">
- 卡卡網(wǎng) gazebo2go.com
- </div>
- </body>
- </html>
顯示效果
上面代碼在Chrome、Firefox、IE11瀏覽器測試通過。
代碼使用了transform:scale(0.8) translate(-240px,0);這個CSS屬性，但這個CSS定義是針對Chrome而寫的，因為Firefox、IE11不需要這個定義。
因此，CSS里還需要針對Firefox、IE11去除前面為Chrome而寫的transform的定義，否則在Firefox、IE11瀏覽器會顯示錯位！
另外要注意的是，scale()和translate()的設(shè)置，在寫代碼時需要調(diào)整它們的數(shù)值，調(diào)到文字位于合適的位置為止。而針對Firefox和IE11的CSS，它們的scale(1.0)不用再調(diào)整。
transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對元素進(jìn)行旋轉(zhuǎn)、縮放、移動或傾斜。
scale()：定義 2D 縮放轉(zhuǎn)換。
scaleX(x)：通過設(shè)置 X 軸的值來定義縮放轉(zhuǎn)換。
scaleY(y)：通過設(shè)置 Y 軸的值來定義縮放轉(zhuǎn)換。
translate()：定義 2D 轉(zhuǎn)換。
translateX(x)：定義轉(zhuǎn)換，只是用 X 軸的值。
translateY(y)：定義轉(zhuǎn)換，只是用 Y 軸的值。
本文介紹了如何設(shè)置文字小于12px，不但在Chrome有效，并且不會對其他瀏覽器產(chǎn)生影響。
參考文章
_henghost.gif)
