在最新版的谷歌里。已經不在支持這個屬性啦
谷歌瀏覽器Chrome是Webkit的內核，有一個 -webkit-text-size-adjust 的私有 CSS 屬性，通過它即
可實現字體大小不隨終端設備或瀏覽器影響。
CSS樣式定義如下：
-webkit-text-size-adjust:none;
如何讓谷歌瀏覽器支持小於12px的字體
經常與網頁打交道的攻城師，應該都知道。谷歌不支持小於12px的字體。
網頁解決方案很多。
比如。修改瀏覽器配置。修改瀏覽器語言。
但作為一個WEB，我們無法修改用戶的瀏覽器。這時候就出現了
1
webkit的私有屬性：
2
html{-webkit-text-size-adjust:none;}
但是，在最新版的谷歌里。已經不在支持這個屬性啦。所以。這個屬性。。。。
已經和我們說再見啦~
CSS3有個新的屬性transform
而我們用到的就是transform:scale()
書寫一段代碼
1
<body>
2
<p>我是一個小於12PX的字體</p>
3
</body>
定義樣式
1
body,p{ margin:0; padding:0}
2
p{font-size:10px;}
放在瀏覽器預覽。會發現最新版谷歌已經不在支持。還是12px
所以我們就用到了
1
-webkit-transform:scale(0.8); //0.8位縮放倍數，具體自己根據實際需求修改
修改后樣式為
1
body,p{ margin:0; padding:0}
2
p{font-size:10px;-webkit-transform:scale(0.8);}
但是，如果，這個屬性會把真個p的屬性都縮放。如果我有背景呢？我有邊框呢？都會被縮小！
所以我們修改結構為
1
<p><span>我是一個小於12PX的字體</span></p>
定義樣式為
1
body,p{ margin:0; padding:0}
2
p{font-size:10px;}
3
span{-webkit-transform:scale(0.8);}
但是你會驚訝發現，不可以。實際上，是以為-webkit-transform:scale(0.8);只能縮放可以定義寬高
的元素，而span是行內元素，不可以
我們修改為
1
body,p{ margin:0; padding:0}
2
p{font-size:10px;}
3
span{-webkit-transform:scale(0.8); display:inline-block}
為什么定義 display:inline-block而不是 display:block？
轉為block就獨占一行啦。如果我后面緊追怎么辦元素。所以轉換為inline-block
放在谷歌瀏覽器里，運行一下會發現支持字體變小啦~~放心啦。。。
但是你會發現。會存在一定的邊距。貌似margin或者padding的間距。這就是縮放存在問題。原來的位
置還占有12px字體的大小。
所以，要對應修改margin了。定義為負的。。
其實還沒結束~~~
你以為這樣就結束了嗎？
NO，我們還需要去兼容opera！！！
為什么？opera現在最新版也是webkit內核啦~~~苦逼的工程師呀~
但是新版本的opera呢？
本來就是10px的字體了。然后在縮放，不敢想象了！
所以我們要修改樣式為
1
body,p{ margin:0; padding:0}
2
p{font-size:10px;}
3
span{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}
讓opera的不縮放。
放心opera還是支持他的私有前綴的。
現在我們代碼就是這樣啦!
01
<!doctype html>
02
<html>
03
<head>
04
<meta charset="utf-8">
05
<title>無標題文檔</title>
06
<style>
07
body,p{ margin:0; padding:0}
08
p{font-size:8px;}
09
span{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}
10
</style>
11
</head>
12
13
<body>
14
<p><span>我是一個小於12PX的字體</span></p>
15
</body>
16
</html>
為了方便，我們最好定義為一個類，方便我們每次調用
修改為
01
<!doctype html>
02
<html>
03
<head>
04
<meta charset="utf-8">
05
<title>無標題文檔</title>
06
<style>
07
body,p{ margin:0; padding:0}
08
p{font-size:8px;}
09
.shrink{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}
10
</style>
11
</head>
12
13
<body>
14
<p><span class="shrink">我是一個小於12PX的字體</span></p>
15
</body>
16
</html>
如果你有好的解決方案。歡迎給我留言！