|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
把字體大小設置小于12px,所有瀏覽器通過(包括Chrome)
作者:admin 時間:2022-5-6 10:21:1 瀏覽:對于Chrome瀏覽器，默認情況下，12px已經(jīng)是網(wǎng)頁字體的最小大小了，但是我們有時想把頁面某個模塊的字體大小設置得更小，小到小于12px，那該怎么辦呢？現(xiàn)在問題解決了，所有瀏覽器測試有效(包括Chrome)，把字體設置小于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) howtostagehomes.com
</div>
<div class="div2">
卡卡網(wǎng) howtostagehomes.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ù)值，調到文字位于合適的位置為止。而針對Firefox和IE11的CSS，它們的scale(1.0)不用再調整。
transform 屬性
transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
scale()：定義 2D 縮放轉換。
scaleX(x)：通過設置 X 軸的值來定義縮放轉換。
scaleY(y)：通過設置 Y 軸的值來定義縮放轉換。
translate()：定義 2D 轉換。
translateX(x)：定義轉換，只是用 X 軸的值。
translateY(y)：定義轉換，只是用 Y 軸的值。
總結
本文介紹了如何設置文字小于12px，不但在Chrome有效，并且不會對其他瀏覽器產(chǎn)生影響。
參考文章
- 站長推薦
