前端面试题，显示小于12px文字Chrome显示小于12px文字难度: 困难公司: 百度标签: CSS 字体大小

Chrome显示小于12px文字

难度: 困难
公司: 百度
标签: CSS 字体大小渲染

经评论区指正，

1、在现在浏览器版本，font-size可以直接设置12px以下的字体，比如:


<p style="font-size: 10px;">这是一段文本，字体大小为10px。</p>

2、在更老的浏览器，比如我找了一台window电脑上chrome 86，font-size: 10px;仍然无法生效，仍然需要通过缩放来实现；

总结，新浏览器可以直接使用 font-size: 10px;，如果要兼容老浏览器，仍然需要放缩实现。

虚心请教，感谢评论区，学习了～

以下是原文

Chrome显示小于12px文字

在CSS中，浏览器默认的最小字体大小是12px，这是为了确保文本的可读性。但是，有时候我们需要显示小于12px的文字，比如在一些图标文字或者小型标签上。在Chrome浏览器中，可以通过一些技巧来实现这一点。

代码示例

使用transform: scale()
```
.small-text {
    font-size: 10px;
    transform: scale(1);
    transform-origin: left top;
}
```
在这段代码中，我们首先设置了一个小于12px的字体大小，然后通过transform: scale(1);来使文本可显示。transform-origin属性用于指定变换的原点，这里设置为左上角。
使用-webkit-text-size-adjust
```
.small-text {
    -webkit-text-size-adjust: none;
    font-size: 10px;
}
```
-webkit-text-size-adjust属性可以禁用Chrome和Safari浏览器的文本大小调整功能，允许显示小于12px的文本。
使用vw单位
```
.small-text {
    font-size: 0.625vw;
}
```
使用视口宽度(vw)单位可以设置一个相对于视口宽度的字体大小，这样就可以绕过最小字体限制。

常见的应用场景

图标文字：在一些图标旁边需要显示一些辅助性的文字，这些文字通常需要更小的字体大小。
小型标签：在一些小型的标签或者徽章上，需要显示一些文字，这些文字也需要更小的字体大小。
数据展示：在一些数据展示的图表或者表格中，有时候需要显示一些辅助性的文字，这些文字也需要更小的字体大小。

常见的错误回答案例

错误使用zoom属性：zoom属性已经被废弃，不应该用于现代的CSS开发中。
```
.small-text {
    zoom: 0.5;
    font-size: 10px;
}
```
错误使用font-size-adjust属性：font-size-adjust属性用于调整字体大小，但是不能用于设置小于12px的字体大小。
```
.small-text {
    font-size-adjust: 0.5;
    font-size: 10px;
}
```
错误使用em单位：em单位是相对于父元素的字体大小，如果父元素的字体大小是12px，那么子元素的字体大小也会受到限制。
```
.small-text {
    font-size: 0.5em;
}
```

参考资料

总结

在Chrome浏览器中显示小于12px的文字，可以通过一些技巧来实现，比如使用transform: scale()、-webkit-text-size-adjust或者vw单位。这些技巧在一些特定的应用场景中非常有用，比如图标文字、小型标签和数据展示等。但是，需要注意的是，不应该使用已经被废弃的属性，比如zoom和font-size-adjust，以及不适合的单位，比如em。通过合理的使用这些技巧，可以提高网页的美观性和用户体验。