css基础知识十九：让Chrome支持小于12px 的文字方式有哪些？区别？

本文介绍: 与网页语言无关，取决于用户在Ch ro m e的设置里（chrome://settings/language s）把哪种语言设置为默认显示语言。浏览器默认设定页面的最小字号，用户可以前往 ch ro m e://settings/fonts 根据需求更改。Ch ro me 中文版浏览器会默认设定页面的最小字号是12px，英文版没有限制。原由 Chro me 团队认为汉字小于12px就会增加识别难度。对于文本需要以更小的字号来显示，就需要用到一些小技巧。而我们在实际项目中，不能奢求用户更改浏览器设置。

在这里插入图片描述
一、背景

Chro me 中文版浏览器会默认设定页面的最小字号是12px，英文版没有限制

原由 Chro me 团队认为汉字小于12px就会增加识别难度

中文版浏览器

与网页语言无关，取决于用户在Chro me的设置里（chro me://settings/language s）把哪种语言设置为默认显示语言

系统级最小字号

&lt;style type="text/css"&gt;
    .span1{
        font-size: 12px;
        display: inline-block;
        zoom: 0.8;
    }
    .span2{
        display: inline-block;
        font-size: 12px;
    }
&lt;/style&gt;
<body>
    <span class="span1">测试10px</span>
    <span class="span2">测试12px</span>
</body>

<style type="text/css">
    .span1{
        font-size: 12px;
        display: inline-block;
        -webkit-transform:scale(0.8);
    }
    .span2{
        display: inline-block;
        font-size: 12px;
    }
</style>
<body>
    <span class="span1">测试10px</span>
    <span class="span2">测试12px</span>
</body>