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

这篇具有很好参考价值的文章主要介绍了css基础知识十九：让Chrome支持小于12px 的文字方式有哪些？区别？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

css基础知识十九：让Chrome支持小于12px 的文字方式有哪些？区别？,css,chrome,前端
一、背景

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

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

中文版浏览器

与网页语言无关，取决于用户在Chrome的设置里（chrome://settings/languages）把哪种语言设置为默认显示语言

系统级最小字号

浏览器默认设定页面的最小字号，用户可以前往 chrome://settings/fonts 根据需求更改

而我们在实际项目中，不能奢求用户更改浏览器设置

对于文本需要以更小的字号来显示，就需要用到一些小技巧

二、解决方案

常见的解决方案有：

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>

效果如下：
css基础知识十九：让Chrome支持小于12px 的文字方式有哪些？区别？,css,chrome,前端

需要注意的是，Zoom 并不是标准属性，需要考虑其兼容性

css基础知识十九：让Chrome支持小于12px 的文字方式有哪些？区别？,css,chrome,前端
-webkit-transform:scale()

针对chrome浏览器,加webkit前缀，用transform:scale()这个属性进行放缩

注意的是，使用scale属性只对可以定义宽高的元素生效，所以，下面代码中将span元素转为行内块元素

实现代码如下：

<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>

效果如下：
css基础知识十九：让Chrome支持小于12px 的文字方式有哪些？区别？,css,chrome,前端
-webkit-text-size-adjust:none