怎样让 Chrome 显示小于 12px 的文字、不同的实现方式之间有什么区别

背景

Chrome 浏览器中文版，会默认设定页面的最小字号为 12px，如果 CSS 设置font-size小于 12px，浏览器也会显示成 12px。

这个 feature 与网页语言无关，而是在浏览器设置里，chrome://settings/languages，把中文设置成浏览器默认语言，就会产生这个情况。

• 用于可以在chrome://settings/fonts设置页面最小字号，从而覆盖掉 12px

但是网页开发不可能要求用户去设置

解决方案

常见的解决方案：

• zoom

MDN 介绍：

The non-standard zoom should be used instead of this property, if possible. However, unlike CSS Transforms, zoom affects the layout size of the element.

注意：根据 MDN 的描述，zoom属性并不是标准的 CSS 属性，所以不要在生产环境使用这个属性，将来这个属性也可能会发生改变。所以尽量使用scale来替代它。

zoom属性可以改变页面上元素的尺寸，属于真实尺寸，会引起回流、重绘。

• -webkit-transform:scale()

PS：这是最佳方案，尽量使用这个属性来实现。

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

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

span: { display: inline-block; -webkit-transfrom: scale(0.85); font-size: 12px; };

这样即可在浏览器上显示 10px 的字体！

• -webkit-text-size-adjust:none （废弃，别使用）

该属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小。

属性值：

percentage | auto（默认值） | none;

percentage：字体显示的大小；

auto：默认值，字体大小会根据设备/浏览器来自动调整；

none:字体大小不会自动调整；

PS：这样设置之后会有一个问题，当你放大网页时，本来默认情况下字体也会随着变大，而设置了这个属性为 none 后，字体只会显示你当前设置的字体大小，不会随着网页放大而变大了！

所以建议不要全局使用这个属性，只针对单一元素使用。

需要注意的是，自从chrome 27之后，就取消了对这个属性的支持。同时，该属性只对英文、数字生效，对中文不生效

总结

其它属性要么非标准、要么已经取消支持了，所以只考虑使用transform: scale()即可！

transform: scale()不会改变元素占据的空间大小，页面不会发生变化，所以不会导致回流·重绘！！！