美文网首页css3
让Chrome支持小于12px 的文字方式有哪些?

让Chrome支持小于12px 的文字方式有哪些?

作者: 小李不小 | 来源:发表于2021-08-17 10:02 被阅读0次

常见的解决方案有:

  • zoom
  • -webkit-transform:scale()
  • -webkit-text-size-adjust:none

Zoom

zoom 的字面意思是“变焦”,可以改变页面上元素的尺寸,属于真实尺寸

其支持的值类型有:

  • zoom:50%,表示缩小到原来的一半
  • zoom:0.5,表示缩小到原来的一半
    使用 zoom 来”支持“ 12px 以下的字体
代码如下:
<style type="text/css">
    .span1{
        font-size: 12px;
        display: inline-block;
        zoom: 0.8;
    }
    .span2{
        display: inline-block;
        font-size: 12px;
    }
</style>
<body>
    <span class="span1">测试10px</span>
    <span class="span2">测试12px</span>
</body>

效果如下:

image.png

相关文章

网友评论

    本文标题:让Chrome支持小于12px 的文字方式有哪些?

    本文链接:https://www.haomeiwen.com/subject/buzxbltx.html