[前端] Chrome浏览器默认显示最小字号为12px_姜小衰的博客-CSDN博客

Chrome浏览器默认显示最小字体为12px

Chrome默认最小字号是12px(最新版英文也有此问题)，这个是Chrome为了更好显示中文设计的。

但是这样一来就会出现，设置为8px字体的元素在Chrome显示仍为12px，导致网页排版错误的问题。

.f8 { font-size : 8px }

既然Chrome浏览器有对默认最小显示字体的限制，那么其它浏览器有相类似的限制吗？为此提供如下代码，对主流的浏览器分别作了测试

mini font size test title > .size-2 { font-size : 2px ; } .size-4 { font-size : 4px ; } .size-6 { font-size : 6px ; } .size-8 { font-size : 8px ; } .size-10 { font-size : 10px ; } .size-12 { font-size : 12px ; } .size-14 { font-size : 14px ; } .size-16 { font-size : 16px ; } .size-18 { font-size : 18px ; } .size-20 { font-size : 20px ; } .size-22 { font-size : 22px ; } .size-24 { font-size : 24px ; } style > head > size-2 p > size-4 p > size-6 p > size-8 p > size-10 p > size-12 p > size-14 p > size-16 p > size-18 p > size-20 p > size-22 p > size-24 p > body > html >

结果发现，在Chrome、Safari中小于12px的字号均显示为12px了

如何更改浏览器默认显示的最小字号

那么如何更改，浏览器默认显示的最小字号呢？

Chrome

Settings -> Appearance -> Customize fonts -> Minimum font size 最小字号可以改为6px

Safari

最小显示字号可以设置为9px

Firefox

firefox最小字号可以设置为9px

Opera

Opera最小字号可以设置为6px

怎么用代码显示出小于12px字号

我们既然无法让用户手动设置浏览器最小显示字号(大部分用户都是小白，或者把他们想像为白痴，SB)，作为开发怎么利用代码实现这样的功能呢？

得用如下代码， .demo 元素中字号会被缩放至 12px * 0.8 = 9.6px