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

Chrome 默认不支持小于 12px 的文字，这是为了保证网页的可访问性。 小于 12px 的文字在很多屏幕上难以阅读，尤其对于视力较差的用户。 但是，如果你确实需要显示小于 12px 的文字，有几种方法可以实现：

1. 使用 transform: scale(): 这是最常用的方法，它可以缩放元素，包括其中的文字。 需要注意的是，缩放会影响整个元素，而不仅仅是文字。

   .small-text {
       font-size: 12px; /* 设置一个初始字体大小 */
       transform: scale(0.8); /* 缩小到 80%，相当于 9.6px */
       transform-origin: left; /* 可选：设置缩放的基点 */
   }
   

   • 优点: 简单易用，兼容性好。
   • 缺点: 会使文字略微模糊，因为它是通过缩放实现的，而不是真正的改变字体大小。 此外，缩放会影响元素的布局，需要仔细调整。

2. 使用 -webkit-text-size-adjust: none; (不推荐): 这个属性可以禁用 Chrome 的最小字体限制，允许显示小于 12px 的文字。 然而，强烈不推荐使用这种方法，因为它会严重影响网页的可访问性，使视力较差的用户难以阅读。 在大多数情况下，应该避免使用这个属性。

   .small-text {
       font-size: 10px;
       -webkit-text-size-adjust: none; /* 不推荐 */
   }
   

3. 使用 SVG: SVG 可以渲染任意大小的文字，不受浏览器最小字体限制的影响。 但是，使用 SVG 会增加代码的复杂度，并且在处理文本换行和对齐方面可能会有一些挑战。

   <svg viewBox="0 0 100 20">
       <text x="0" y="15" font-size="10">小于 12px 的文字</text>
   </svg>
   

4. 使用图片: 如果文字内容是固定的，可以将文字制作成图片，然后在网页中显示图片。 这种方法可以精确控制文字的大小和样式，但是会增加额外的 HTTP 请求，并且不利于 SEO。

总结:

除非绝对必要，尽量避免使用小于 12px 的文字。 如果必须使用，transform: scale() 是相对来说最佳的方案，因为它简单易用且兼容性好。 但是，需要注意缩放带来的模糊和布局问题。 应该优先考虑其他设计方案，例如调整布局或使用不同的字体，以避免使用过小的文字。 永远记住，网页的可访问性非常重要。