|
|
|
|
|
|
贊助商
分類(lèi)目錄
贊助商
最新文章
搜索
把字體大小設(shè)置小于12px,所有瀏覽器通過(guò)(包括Chrome)
作者:admin 時(shí)間:2022-5-6 10:21:1 瀏覽:對(duì)于Chrome瀏覽器，默認(rèn)情況下，12px已經(jīng)是網(wǎng)頁(yè)字體的最小大小了，但是我們有時(shí)想把頁(yè)面某個(gè)模塊的字體大小設(shè)置得更小，小到小于12px，那該怎么辦呢？現(xiàn)在問(wèn)題解決了，所有瀏覽器測(cè)試有效(包括Chrome)，把字體設(shè)置小于12px。
實(shí)例
完整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) www.howtostagehomes.com
</div>
<div class="div2">
卡卡網(wǎng) www.howtostagehomes.com
</div>
</body>
</html>
顯示效果
上面代碼在Chrome、Firefox、IE11瀏覽器測(cè)試通過(guò)。
代碼分析
代碼使用了transform:scale(0.8) translate(-240px,0);這個(gè)CSS屬性，但這個(gè)CSS定義是針對(duì)Chrome而寫(xiě)的，因?yàn)镕irefox、IE11不需要這個(gè)定義。
因此，CSS里還需要針對(duì)Firefox、IE11去除前面為Chrome而寫(xiě)的transform的定義，否則在Firefox、IE11瀏覽器會(huì)顯示錯(cuò)位！
另外要注意的是，scale()和translate()的設(shè)置，在寫(xiě)代碼時(shí)需要調(diào)整它們的數(shù)值，調(diào)到文字位于合適的位置為止。而針對(duì)Firefox和IE11的CSS，它們的scale(1.0)不用再調(diào)整。
transform 屬性
transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。
scale()：定義 2D 縮放轉(zhuǎn)換。
scaleX(x)：通過(guò)設(shè)置 X 軸的值來(lái)定義縮放轉(zhuǎn)換。
scaleY(y)：通過(guò)設(shè)置 Y 軸的值來(lái)定義縮放轉(zhuǎn)換。
translate()：定義 2D 轉(zhuǎn)換。
translateX(x)：定義轉(zhuǎn)換，只是用 X 軸的值。
translateY(y)：定義轉(zhuǎn)換，只是用 Y 軸的值。
總結(jié)
本文介紹了如何設(shè)置文字小于12px，不但在Chrome有效，并且不會(huì)對(duì)其他瀏覽器產(chǎn)生影響。
參考文章
- CSS3 transform: scale() 縮放轉(zhuǎn)換
- 實(shí)例分析CSS3 transform: translateY() rotate() rotateY() rotateX()
- CSS需這樣識(shí)別火狐Firefox、Chrome瀏覽器寫(xiě)兼容性代碼
- 不注意這點(diǎn)，\9和\0就可能對(duì)hack IE11\IE9\IE8無(wú)效
- IE7/IE8/IE9/IE11 CSS hack 寫(xiě)法
- IE11 hack css的符號(hào)原來(lái)是“#”號(hào)
- css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼
- css巧用兩符號(hào)#和下橫線解決div高寬的瀏覽器兼容性問(wèn)題
標(biāo)簽: 字體大小設(shè)置 12px
