前端面试资料之大厂真题篇(一)

让谷歌浏览器支持小于12号字体的方式有哪些？有什么区别？

在谷歌浏览器中，默认情况下，小于12px的字体会被强制放大到12px。这是因为浏览器出于可读性和可访问性考虑，限制了最小字体大小。但有时我们需要使用小于12px的字体，比如在特定设计或特殊元素（如图标字体）中。以下是一些方法和它们的区别：

1. 使用CSS的transform属性缩放字体

.small-font {
    font-size: 12px; /* 设置为12px */
    transform: scale(0.5); /* 缩放为0.5倍 */
    transform-origin: left top; /* 确保缩放从左上角开始 */
}

<p class="small-font">这是缩放后的小字体文本。</p>

• 效果：通过缩放元素实现小字体效果。
• 区别：字体是被缩放的，可能会导致其他样式和布局问题。缩放后的文本可能会模糊。

2. 使用SVG或Canvas绘制小字体

使用SVG或Canvas可以完全控制字体大小和渲染。

SVG方式：

<svg width="100" height="30">
    <text x="0" y="15" font-family="Arial" font-size="10">小字体</text>
</svg>

Canvas方式：

<canvas id="smallFontCanvas" width="100" height="30"></canvas>
<script>
    var canvas = document.getElementById('smallFontCanvas');
    var context = canvas.getContext('2d');
    context.font = '10px Arial';
    context.fillText('小字体', 0, 15);
</script>

• 效果：使用SVG或Canvas绘制的小字体。
• 区别：适合静态内容，不适合需要用户选择或复制的文本。适用于图形化的字体展示。

3. 使用CSS的-webkit-text-size-adjust属性

调整文本大小调整属性，但注意这只是对移动设备生效的属性。 

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

• 效果：禁用文本大小自动调整。
• 区别：主要对移动设备有效，对桌面浏览器可能没有影响。

4. 使用图片替代文字

将文字转换为图片，以便可以显示任意大小的字体。

<img src="small-text.png" alt="小字体">

• 效果：使用图片展示文字。
• 区别：文本无法被选择或复制，不适合动态内容。

5. 使用图标字体（Icon Fonts）

图标字体通常设计为矢量图形，可以设置为任意大小。

<link rel="stylesheet" href="path/to/fontawesome.css">
<i class="fas fa-font-awesome" style="font-size: 10px;"></i>

• 效果：使用图标字体显示小尺寸图标。
• 区别：适用于图标和简单图形，不适合复杂文本内容。

总结

• 缩放字体（transform: scale）：简单但可能导致模糊。
• SVG/Canvas绘制：精确控制但不适合选择/复制。
• -webkit-text-size-adjust：对移动设备有效。
• 图片替代：不可选择/复制，不适合动态内容。
• 图标字体：适合图标和简单图形。

根据具体需求选择合适的方法，实现小于12px字体的效果。

资料来源：岩石教程-大厂真题系列