面试题：如何给网页设置小于 12px 的字体？

这是一个关于浏览器限制和现代 CSS 特性的面试题。传统上，浏览器（特别是早期的 WebKit 内核）会对字体大小设置下限（通常为 12px），但现代解决方案已经非常成熟。

核心答案

在现代浏览器中，可以直接使用 CSS 设置小于 12px 的字体大小（如 10px, 8px）。浏览器的“12px 限制”主要存在于非常老的移动端浏览器（如旧版 Android 浏览器），现代桌面和移动端浏览器已基本移除了这一限制。

.small-text {
    font-size: 10px; /* 现代浏览器中完全可行 */
}

历史背景与旧版解决方案

为什么会有“12px 限制”？

早期的移动端浏览器（尤其是基于 WebKit 的 Android 浏览器）为了提升移动端的可读性和用户体验，强制设置了最小字体大小为 12px。
即使你在 CSS 中写了 font-size: 10px，浏览器也会将其渲染为 12px。

针对旧版浏览器的解决方案（现已较少使用）

使用 transform: scale()
- 这是最常用且兼容性最好的方法。原理：先设置一个大于 12px 的字体（如 12px），然后通过 transform: scale() 缩小整个元素。
使用 -webkit-text-size-adjust: none
- WebKit 特有的属性，用于禁用文本自动调整。注意：此属性已被废弃，且可能影响可访问性（用户无法通过设置调整字体）。
使用 viewport 的 minimum-scale
- 通过设置视口缩放来间接控制字体大小。缺点：影响整个页面的缩放，用户体验差，不推荐。

现代最佳实践与注意事项

✅ 直接设置小字体（推荐）

在现代开发中，应优先直接使用 font-size 设置小字体。现代浏览器（Chrome, Firefox, Safari, Edge）都支持小于 12px 的字体。

.micro-text {
    font-size: 8px;
    /* 可搭配 */
    font-family: 'Arial', sans-serif; /* 选择清晰的字体 */
    color: #666; /* 避免纯黑，提高可读性 */
}

⚠️ 可访问性 (Accessibility) 警告

关键点：设置过小的字体可能损害可访问性，对视力不佳的用户不友好。
最佳实践：
- 避免滥用：仅在必要时（如图表标注、版权信息）使用小于 12px 的字体。
- 提供替代方案：确保重要内容不会因为字体过小而无法阅读。
- 响应式设计：在小屏幕上避免使用极小字体，可考虑通过媒体查询在大屏幕上使用小字体。

✅ 使用 `rem` 或 `em` 单位

使用相对单位便于响应式设计和用户自定义。

html {
    font-size: 16px; /* 基准 */
}

.small {
    font-size: 0.625em; /* 10px (10/16) */
}

✅ 利用 `clamp()` 函数（现代 CSS）

设置字体大小的上下限，兼顾设计和可访问性。

.responsive-small {
    font-size: clamp(10px, 2vw, 14px); /* 最小 10px, 理想 2vw, 最大 14px */
}

如何检测浏览器是否支持小字体？

在需要兼容极老设备的场景下，可以使用 JavaScript 检测：

function supportsSub12pxFont() {
    const div = document.createElement('div');
    div.style.cssText = 'font-size: 10px; position: absolute; left: -9999px;';
    div.textContent = 'I';
    document.body.appendChild(div);
    const height = div.offsetHeight;
    document.body.removeChild(div);
    // 如果高度小于 12px，则支持
    return height < 12;
}

总结回答示例

在现代浏览器中，可以直接使用 font-size: 10px 等 CSS 规则来设置小于 12px 的字体，浏览器的“12px 限制”已基本成为历史。

在过去，为了解决旧版移动端浏览器的限制，常用 transform: scale() 缩小元素或使用 -webkit-text-size-adjust: none。但这些方法现在已不推荐。

最佳实践是直接设置小字体，但必须注意可访问性，避免在重要内容上使用过小字体。可以结合 rem、em 或 clamp() 函数来实现更灵活、更友好的文本显示。

THE END

前端 CSS 面试题