前言
正常开发中，比如设置最小字体为12以下，会出现不生效的情况。原因是因为谷歌浏览器有最小字体的限制，那么如何解决这个问题呢？
本文主要说明两个方式：
- 调整谷歌浏览器的默认限制字体大小
- 使用css的transform属性进行缩放
1. 调整谷歌浏览器默认字体限制
要打破Chrome的最小字号限制，按照以下步骤进行操作：
- 打开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浏览器设置了一个默认的最小字体限制，当你尝试设置小于某个阈值的字体大小时，字体大小将不会按照预期变化。这种限制主要是为了确保网页内容的可读性和用户的浏览体验。
为了突破这个限制，本文主要演示了两种方法：
-
调整Chrome浏览器的默认字体大小限制：
- 通过Chrome的设置界面，用户可以自定义字体大小，并设置其最小值。虽然这种方法简单直接，但它需要用户手动操作，并不适合在生产环境中使用。
-
使用CSS的
transform属性进行缩放：- 这种方法不需要用户进行任何操作，它完全依赖于CSS代码。你可以设置一个较大的字体大小，然后使用
transform: scale()来缩小它。 - 需要注意的是，使用
transform属性进行缩放时，可能会出现文本对齐问题。为了解决这个问题，我们可以使用transform-origin属性来调整缩放的基准点。
- 这种方法不需要用户进行任何操作，它完全依赖于CSS代码。你可以设置一个较大的字体大小，然后使用
单纯记录下，如果错误，请指正O^O!
原文链接：https://juejin.cn/post/7338742634168139788 作者：一诺滚雪球
