技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

把字体大小设置小于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>

demodownload

显示效果

 

上面代码在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有效,并且不会对其他浏览器产生影响。

参考文章

标签: 字体大小设置  12px  
相关文章
    x
    • 站长推荐
    /* 左侧显示文章内容目录 */