怎么让Chrome支持小于12px 的文字？

在默认情况下，Chrome 浏览器的最小字体大小限制为 12px，因此无法直接设置小于 12px 的文字大小。然而，可以通过以下方法绕过这个限制：

1. 使用缩放比例：可以使用 CSS 的 transform 属性来缩放文本元素以达到小于 12px 的效果。例如，使用 transform: scale(0.8) 将文本缩放为 80% 的原始大小。请注意，这可能会导致文本外观变得模糊或失真。

   .small-text {
     transform: scale(0.8);
   }
   

2. 使用 zoom：将容器或文本元素的 zoom 属性设置为小于 1 的值，例如 zoom: 0.8;。这会缩小文本元素及其容器，使得文本看起来更小。请注意，zoom 是非标准的 CSS 属性，不一定在所有浏览器中都有效。

   .small-text {
     zoom: 0.8;
   }
   

3. 使用 -webkit-text-size-adjust：将容器或文本元素的 -webkit-text-size-adjust 属性设置为 “none” 或 “auto” 可以控制 Chrome 浏览器对文本大小的调整行为。通过将其设置为 “none”，可以禁用 Chrome 浏览器的最小字体大小限制。请注意，-webkit-text-size-adjust 是针对 WebKit 内核（包括 Chrome 和 Safari）的私有属性。

   .small-text {
     -webkit-text-size-adjust: none;
   }
   

4. 使用图片替代：如果需要应用较小的文字大小，并且无法使用缩放，可以将文本转换为图像，并将其作为背景图像或内联图像插入到元素中。这样可以绕过浏览器的最小字体大小限制。但要注意，这将增加页面加载时间并且不利于可访问性和响应式设计。

   <div class="small-text">
     <img src="path/to/small_text_image.png" alt="Small Text" />
   </div>
   

无论选择哪种方法，都应该评估是否真正需要使用小于 12px 的文字大小，并确保在可读性、用户体验和跨浏览器兼容性方面做好测试和优化工作。