如何实现chrome浏览器上小于12px文字

1. Zoom 非标属性，有兼容问题，缩放会改变了元素占据的空间大小，触发重排

2. transform:scale() 大部分现代浏览器支持，并且对英文、数字、中文也能够生效，缩放不会改变了元素占据的空间大小，页面布局不会发生变化

3. text-size-adjust对谷歌浏览器有版本要求，在27之后，就取消了该属性的支持，并且只对英文、数字生效

 <style>
    p{
      display: inline-block;
      font-size: 10px;
    }
    .little{
      transform: scale(0.8);
      /* zoom: 80%; */
    }
    /* html{
      text-size-adjust: none;
    }   没作用 */
  </style>
</head>
<body>
  <p class="little">10px</p>
  <p class="big">12px</p>
</body>

 

 

posted @ 2022-08-04 21:29  简法  阅读(90)  评论(0)    收藏  举报