谷歌浏览器不支持小于12px的解决方案

最新推荐文章于 2022-08-25 14:41:59 发布

爱写日记的仙女

最新推荐文章于 2022-08-25 14:41:59 发布

阅读量268

点赞数

分类专栏： html+css 文章标签：谷歌浏览器不支持12px以下大小的字体

本文链接：https://blog.csdn.net/weixin_38912024/article/details/97006043

版权

html+css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

面试字节跳动的时候遇到了如何解决谷歌浏览器小于12px的字体无法显示的问题，于是回来自己尝试了一下

<body>
    <div class="a">我是20px</div>
    <div class="b">我是16px</div>
    <div class="c">我是12px</div>
    <div class="d">我是10px</div>
    <div class="e">我是6px</div>

</body>
       .a{
            font-size: 20px;
        }
        .b{
            font-size: 16px;
        }
        .c{
            font-size: 12px;
        }
        .d{
            font-size: 10px;
        }
        .e{
            font-size: 6px;
        }

显示结果
在这里插入图片描述
小于12px的字体均显示为12px
解决方案
利用css3的transform，注意：必须有宽高，所以必须inline-block或block

       .a{
            font-size: 20px;
        }
        .b{
            font-size: 16px;
        }
        .c{
            font-size: 12px;
        }
        .d{
            width: 50px;
            height: 50px;
            font-size: 10px;
            -webkit-transform: scale(0.5);
        }
        .e{
            width: 50px;
            height: 50px;
            font-size: 6px;
            -webkit-transform: scale(0.5);
        }
    <div class="a">我是20px</div>
    <div class="b">我是16px</div>
    <div class="c">我是12px</div>
    <div class="d">我是10px</div>
    <div class="e">我是6px</div>

在这里插入图片描述

爱写日记的仙女

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
谷歌浏览器不支持小于12px的解决方案

面试字节跳动的时候遇到了如何解决谷歌浏览器小于12px的字体无法显示的问题，于是回来自己尝试了一下<body> <div class="a">我是20px</div> <div class="b">我是16px</div> <div class="c">我是12px</div> &...
复制链接

扫一扫