把字体大小设置小于12px,所有浏览器通过(包括Chrome)
作者:admin 时间:2022-5-6 10:21:1 浏览:对于Chrome浏览器，默认情况下，12px已经是网页字体的最小大小了，但是我们有时想把页面某个模块的字体大小设置得更小，小到小于12px，那该怎么办呢？现在问题解决了，所有浏览器测试有效(包括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">
卡卡网 www.webkaka.com
</div>
<div class="div2">
卡卡网 www.webkaka.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()的设置，在写代码时需要调整它们的数值，调到文字位于合适的位置为止。而针对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有效，并且不会对其他浏览器产生影响。
参考文章
相关文章
x
- 站长推荐
