突破浏览器限制：前端超小字号实现技巧

一、简介

​ 在Web前端开发中，在某些特殊场景下设计师为了追求更精细的视觉效果，会要求页面展示小于12px的文字。然而，由于浏览器对于最小字号的限制，直接设置小于12px的字号通常无法正常显示，浏览器通常会自动调整为默认的最小字号12px，这限制了前端开发人员对设计稿的还原，以及页面设计效果的表达。

​ 本文将详细介绍几种实现小于12px字号的方案，包括CSS缩放、相对单位、使用SVG文字等多种方案，并逐一解析这些方案的实现步骤、优缺点和适用场景。

二、具体方案

1、CSS缩放（scale）

​ 该方案通过CSS的

transform: scale();

缩放属性，将普通文本进行缩小，从而实现小于12px的文本效果。

​ 该方案常用于单行文本，如标签文本等场景。

优点：

• 代码简洁： 只需在相应文本的CSS中设置缩放相关属性即可。
• 文本可选中： 文本在DOM中依旧是文本节点，可以被用户选中、复制等。
• 兼容性较好： 大多现代浏览器都支持CSS缩放属性。

缺点：

• 布局影响： 缩放后文本元素虽然变小，但依旧占据原本大小的布局空间，影响整体布局。
• 样式影响： 缩放属性不仅会影响到文本字号，还会影响到行高、内边距等诸多属性，影响整体样式。
• 渲染性能： 大量文本进行缩放会增加浏览器的渲染成本，从而影响页面性能。

案例代码：

<pstyle="font-size: 12px;">这是12px的文本</p><pclass="sf">这是用scale缩放实现的小于12px的文本</p><style>.sf{/* 元素的宽高 缩小后依旧占据该大小的布局空间 */width: 200px;height: 100px;/* 内边距受缩小影响 */padding-left: 40px;/* 设置字号为20px */font-size: 20px;/* 行高受缩小影响 */line-height: 30px;/* 将文本元素进行缩小为原来的50% 字号就变为20px*50%=10px */transform:scale(0.5);/* 设置缩放的中心点为左上角 使其缩放后依旧能左对齐 默认为50% 50% */transform-origin: 0% 0%;}</style>

页面效果：

2、相对单位（常用）

​ 该方案通过在设置文本的字号时使用相对单位，如：

em

、

rem

、

%

等，使文本字号相对于一个基数进行计算，从而实现小于12px的文本效果。

​ 该方案常用于移动端响应式布局等场景。

优点：

• 代码简洁： 只需在设置文本字号时使用相对单位即可，有时可能需要父元素或根元素的字号属性配合。不会影响其他样式属性的效果。
• 文本可选中： 文本在DOM中依旧是文本节点，可以被用户选中、复制等。
• 兼容性较好： 大多现代浏览器都支持CSS相对单位。
• 响应式设计： 相对单位可以根据其基数的变化而变化，可以用于实现响应式布局，兼容适配不同设备屏幕。

缺点：

• 浏览器差异： 不同浏览器对相对单位的解析可能存在一定的差异，可能导致文本效果显示不一致。
• 可读性差： 使用相对单位设置文本字号，需计算才能得知真实的字号大小，这会对代码的可读性造成一定影响。
• 性能影响： 大量使用相对单位会使浏览器在渲染时进行大量的计算，造成一定的性能影响。但浏览器本身对这些情况有一定优化，例如：缓存相对单位的计算结果，避免平凡重复计算等等，因此对性能影响很有限。

案例代码：

<pstyle="font-size: 12px;">这是12px的文本</p><divclass="father"><pclass="son1">这是用相对单位 % 实现的小于12px的文本</p><pclass="son2">这是用相对单位 em 实现的小于12px的文本</p><pclass="son3">这是用相对单位 rem 实现的小于12px的文本</p></div><style>html{font-size: 20px;}.father{font-size: 20px;}.son1{/* 基数为从父元素继承的font-size: 20px *//* 20*50% = 10px */font-size: 50%;}.son2{/* 基数为从父元素继承的font-size: 20px *//* 20*0.5 = 10px */font-size: 0.5em;}.son3{/* 基数为从根元素的font-size: 20px *//* 20*0.5 = 10px */font-size: 0.5rem;}</style>

页面效果：

3、SVG

​ 该方案是通过SVG矢量图形下的

<text>

元素绘制文本，设置其

font-size

属性的值，从而实现小于12px的文本效果。

​ 该方案常用于文本Icon等场景。

优点：

• 可缩放性： SVG具有矢量特性，将文本进行缩放，且仍能在不同分辨率下保持清晰锐利的边缘。
• 文本可选中： 文本虽然是通过SVG绘制的，但仍可以被用户选中、复制等。
• 灵活性高： 可以通过 CSS 和 JavaScript 对 SVG 中的文本进行样式控制和交互操作，实现更多的创意效果。

缺点：

• 代码复杂： 需要编写SVG代码，比直接使用HTML和CSS来说，代码相对复杂。
• SEO不友好： 如果SVG以外部文件的形式在HTML中被引用，则部分搜索引擎对其内部文本内容的索引支持较弱，可能影响SEO。但是如果SVG代码直接写在HTML中，则不会存在该问题，搜索引擎会正常读取和解析。

案例代码：

<pstyle="font-size: 12px;">这是12px的文本</p><svgwidth="200"height="20"><textx="0"y="10"font-size="10px">这是用svg实现的小于12px的文本</text></svg>

页面效果：

4、Canvas

​ 该方案是通过Canvas元素绘制文本，从而实现小于12px的文本效果。

​ 该方案可用于绘制复杂的艺术字体等场景。

优点：

• 变动灵活： Canvas可用来绘制任意形状和文本，可以绘制复杂的艺术字体或与其他图形元素进行融合。
• 动态生成： 可以通过JavaScript动态生成和更新内容。
• 显示一致： Canvas 绘制的图形在所有支持 Canvas 的浏览器中都以同样的方式呈现，避免了不同浏览器对字体渲染的差异性，保证了显示效果的一致性。

缺点：

• 不可选中： Canvas绘制的文本是位图，文本无法被选中或复制。
• SEO不友好： 搜索引擎无法读取和解析Canvas绘制的内容。
• 代码复杂： 如果使用Canvas绘制大量文本，需要书写大量的JavaScript代码。后期修改维护的成本较高。
• 性能影响： Canvas 的绘图操作需要更多的计算资源，频繁重绘或复杂的绘图可能会影响页面性能。
• 清晰度问题： 在高分辨率屏幕或缩放页面时，Canvas 绘制的文本无法自适应，清晰度可能会比较模糊。

案例代码：

<pstyle="font-size: 12px;">这是12px的文本</p><canvasid="myCanvas"width="200"height="20"></canvas><script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");
  ctx.font ="10px Arial";
  ctx.fillText("这是用canvas实现的小于12px的文本",0,10);</script>

页面效果：

5、文字图片

​ 该方案是通过将小于12px的文本切成图片，然后通过

<img>

或

background-image

显示在指定位置，从而实现小于12px的文本效果。

​ 该方案可用于特殊字体等场景。

优点：

• 显示一致： 所有浏览器显示效果一致，不受浏览器字体渲染限制。
• 支持复杂效果： 支持阴影、描边、重影等复杂的设计效果，只要图片能展现，页面就能显示。
• 代码简洁： 无论多复杂的文本样式，只要在页面相应位置显示图片即可，前端开发工作量小。

缺点：

• 不可选中： 图片文本无法被选中或复制。
• SEO不友好： 搜索引擎无法读取和解析图片的文本内容，可能通过<img>标签alt属性做一定弥补。
• 性能影响： 图片需要额外进行请求加载，如果图片体积过大，可能影响页面加载速度。
• 清晰度问题： 在高分辨率屏幕或缩放页面时，图片文本无法自适应，清晰度可能会比较模糊。

请关注公众号，查看更多优质资源：