如何打破Chrome的最小字号限制

前言

正常开发中，比如设置最小字体为12以下，会出现不生效的情况。原因是因为谷歌浏览器有最小字体的限制，那么如何解决这个问题呢？

本文主要说明两个方式：

chrome 118版本后已经字体大小最小限制默认关闭了，直接支持小于12px的字体大小

1. 调整谷歌浏览器默认字体限制

要打破Chrome的最小字号限制，按照以下步骤进行操作：

例如：当我们需要设置字体为6px时

打开百度浏览器，当最小字体设置为12px,当设置为12以下时，字体不会变化。

浏览器设置：

页面显示：

调整最小字体为6px：

浏览器设置：

页面显示：

总结一下：谷歌浏览器页面字体的最小限制，是因为浏览器的默认限制。我们平常开发中不可能每个浏览器进行设置，下面介绍使用css的缩放突破最小字体限制。

2. 使用css的transform属性进行缩放

例如：如果需要设置字体为10px,那么可以先将字体设置为20px，通过缩放一半进行实现。

注意：transfrom属性针对块级元素

缩放后会出现对齐问题，需要设置transform-origin属性

如果未设置transform-origin：

对齐出现问题，设置后：

完整css设置：

font-size: 20px;
transform: scale(0.5);
display: inline-block;
transform-origin: 0 22px;

3. 总结

在Web开发中，Chrome浏览器设置了一个默认的最小字体限制，当你尝试设置小于某个阈值的字体大小时，字体大小将不会按照预期变化。这种限制主要是为了确保网页内容的可读性和用户的浏览体验。

为了突破这个限制，本文主要演示了两种方法：

单纯记录下，如果错误，请指正O^O!