美文网首页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