admin管理员组文章数量:1529464
Chrome浏览器默认显示最小字体为12px
Chrome默认最小字号是12px(最新版英文也有此问题)，这个是Chrome为了更好显示中文设计的。
但是这样一来就会出现，设置为8px字体的元素在Chrome显示仍为12px，导致网页排版错误的问题。
.f8 {
font-size: 8px
}
其它浏览器默认对最小字号有限制吗？
既然Chrome浏览器有对默认最小显示字体的限制，那么其它浏览器有相类似的限制吗？为此提供如下代码，对主流的浏览器分别作了测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mini font size test</title>
<style>
.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>
<body>
<p class="size-2">size-2</p>
<p class="size-4">size-4</p>
<p class="size-6">size-6</p>
<p class="size-8">size-8</p>
<p class="size-10">size-10</p>
<p class="size-12">size-12</p>
<p class="size-14">size-14</p>
<p class="size-16">size-16</p>
<p class="size-18">size-18</p>
<p class="size-20">size-20</p>
<p class="size-22">size-22</p>
<p class="size-24">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
.demo {
font-size: 12px
transform: scale(0.8);
transform-origin: left;
}
版权声明：本文标题：[前端] Chrome浏览器默认显示最小字号为12px 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1726735405a1082647.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论