前端面試:怎么讓Chrome支持小于12px的文字?
要讓Chrome瀏覽器支持小于12px的文字,可以使用CSS的font-size屬性來設置字體大小。
以下是一個示例CSS代碼,將所有字體大小設置為小于12px:
* {
font-size: 10px;
}
解釋:在CSS中,通過*選擇器可以選擇頁面上所有的元素。然后,通過font-size屬性來設置字體大小。在上面的示例代碼中,font-size的值設置為10像素。您可以將這個值更改為小于12px的任何值。
如果您想在特定的HTML元素中支持小于12px的文本,可以使用相同的CSS選擇器,只是在其后面加上元素的選擇器,例如:
<p style="font-size: 10px;">這里支持小于12px的文字。</p>
請注意,當您將字體大小設置為小于12px時,可能會導致一些文本顯示不清晰或不可讀。因此,您可能需要根據具體情況進行調整。
注意:
html, body {-webkit-text-size-adjust: none;}
新版的chrome已經取消了。
CSS3有個新的屬性transform,而我們用到的就是transform:scale()
p{font-size:10px;-webkit-transform:scale(0.8);}
但是,如果,這個屬性會把整個p的屬性都縮放。如果我有背景呢?我有邊框呢?都會被縮小!
所以我們修改結構為。
我是一個小于12PX的字體。
代碼如下:
body,p{
margin:0;
padding:0
}
p{
font-size:10px;
}
span{
-webkit-transform:scale(0.8);
display:inline-block
}
定義 display:inline-block而不是 display:block;會發現。
會存在一定的邊距。貌似margin或者padding的間距。
這就是縮放存在問題。原來的位置還占有12px字體的大小。所以,要對應修改margin了。定義為負的。
還有一個方法。
html {font-size: 625%;}
body {font-size: 0.16rem;}