在 Chrome 浏览器中，默认情况下，最小字体大小被限制为 12px。这是为了确保网页内容的可读性，尤其是在移动设备上。然而，如果你确实需要显示小于 12px 的文字，可以通过以下几种方法来实现：

方法 1：使用 CSS transform 缩放

你可以通过 CSS 的 transform: scale() 属性来缩小文本的大小。这种方法不会改变实际的字体大小，而是通过缩放元素来实现视觉上的缩小效果。

.small-text {
    font-size: 12px; /* 设置为浏览器允许的最小字体 */
    transform: scale(0.5); /* 缩小到原来的一半 */
    transform-origin: left top; /* 确保缩放后的文本位置正确 */
}

注意：

• transform: scale() 会影响整个元素的内容（包括文本、图片等），因此你需要确保其他内容不会因为缩放而出现问题。
• 缩放后的文本可能会影响可读性，尤其是在低分辨率屏幕上。

方法 2：使用伪元素和 content 属性

你可以通过伪元素（如 ::before 或 ::after）来插入较小的文字，并且通过 font-size 直接设置较小的值。虽然 Chrome 会限制主内容的字体大小，但它不会限制伪元素中的字体大小。

.small-text::after {
    content: "这是小于12px的文字";
    font-size: 8px;
    display: inline-block;
}

注意：

• 这种方法只适用于你不需要与用户交互的静态文本。
• 伪元素中的文本无法直接选择或复制。

方法 3：使用 SVG 文本

SVG（可缩放矢量图形）不受浏览器的最小字体限制。你可以将文本嵌入到 SVG 中，并通过 SVG 的属性来控制文本的大小。

<svg width="100" height="20">
    <text x="0" y="15" font-size="8" fill="black">这是小于12px的文字</text>
</svg>

注意：

• SVG 文本适合用于图标或装饰性文本，但不适合大段文字。
• SVG 文本的渲染方式与普通 HTML 文本不同，可能会有性能或兼容性问题。

方法 4：调整浏览器设置

虽然这不是一个推荐的做法，但你可以通过修改 Chrome 的设置来更改默认的最小字体大小。具体步骤如下：

1. 打开 Chrome 浏览器。
2. 输入 chrome://settings/appearance 并按下回车。
3. 找到“自定义字体”部分，点击“高级”。
4. 在“最小字体大小”中选择更小的值（例如 9px 或 6px）。

注意：

• 这种方法会影响所有网站的字体显示，因此可能会导致某些网站的文本变得难以阅读。
• 不建议全局调整浏览器的字体设置，除非你明确知道这样做不会影响其他网站的用户体验。

总结

如果你想在 Chrome 中显示小于 12px 的文字，最常见且安全的方法是使用 transform: scale() 来缩放文本，或者使用 SVG 来绘制文本。这两种方法都不会违反浏览器的最小字体限制，同时也不会影响其他页面元素的正常显示。

如果你只是偶尔需要显示极小的文字，比如用于图标或装饰性文本，可以考虑使用伪元素或 SVG。