多年青島網站建設經驗,專業青島網站設計公司青島網站制作公司關于我們 | 客戶服務歡迎來到青島網站建設公司青華互聯!
年輕,更要脫穎而出
對于網站建設,我們有活力,有態度
我們的優勢: 專業網絡公司,網站設計師量身定制 配備阿里云主機,BGP多線,高速訪問 保障網站數據穩定、安全 免費提供快速ICP備案 承諾24小時快速解決網站簡單問題

利用CSS設置小于12px的文字 解決常用瀏覽器字體大小

更新時間:2019-07-23 10:04   已閱讀: 次 |  作者:青華互聯  來源:青島網站建設
谷歌瀏覽器Chrome是Webkit的內核,之前,有一個 -webkit-text-size-adjust 的私有 CSS 屬性,通過它即可實現字體大小不隨終端設備或瀏覽器影響。
CSS代碼定義如下:
 
-webkit-text-size-adjust:none;
但是,在現在最新版的谷歌里,已經不在支持這個屬性啦。
 
所以css又出了新的屬性:transform:scale()
 
<body><p>我是一個小于12PX的字體</p></body>
定義一個樣式
 
body,p{ margin:0; padding:0}
p{font-size:10px;}
放在瀏覽器預覽,會發現最新版谷歌已經不在支持,還是12像素
 
所以我們就要用到了,下面屬性
 
-webkit-transform:scale(0.8);   //0.8位縮放倍數,具體自己根據實際需求修改
修改后樣式為
 
body,p{ margin:0; padding:0}
p{font-size:10px;-webkit-transform:scale(0.8);}
但是,這個屬性會把整個p的屬性都縮放。
 
如果有背景、邊框、都會被縮小!
 
所以我們需要修改結構為
 
<p><span>我是一個小于12PX的字體</span></p>
定義樣式為
 
body,p{ margin:0; padding:0}
p{font-size:10px;}
span{-webkit-transform:scale(0.8);}
 
改了之后,還是不可以的。
 
原因 -webkit-transform:scale(0.8); 只能縮放可以定義寬高的元素,而span是行內元素,不可以
 
所以我們修改為
 
body,p{ margin:0; padding:0}
p{font-size:10px;}
span{-webkit-transform:scale(0.8); display:inline-block}
 
為什么定義 display:inline-block 而不是 display:block?
轉為block就獨占一行啦!如果我后面還有其他元素就會受到影響,所以需要轉換為 inline-block
 
現在放到谷歌瀏覽器里,就會發現支持字體變小啦
 
但是還會存在一定的邊距,貌似margin或者padding的間距,這就是縮放存在問題,原來的位置還占有12px字體的大小。
所以,還要對應修改margin了,定義為負的即可.

文章引用:http://www.ztapsy.icu/news/webzhishi/1154.html
青島網站建設
電話咨詢
0532-80812129
186-532-19163
青島網站制作
青島網站建設手機站
返回頂部
凤凰彩票导师说稳赚