做封面标题做到第三版我还是没能让那两个字母站住。字号已经顶到画布边缘字重也拉到最粗衬线换了几轮可整行字看着还是单薄像一张纸贴在墙上没有任何纵深。后来我把同一个词复制了三份每一份往后错开一点、压暗一档再把底下一层加粗半个号——整块标题立刻厚了起来像是有了自己的影子。这就是我这几年反复在用的一套手法我习惯叫它叠字母。叠字母说的不是什么高深技术就是把同一串文字按层级复制、错位、调明度、处理边缘让平面的字产生厚度、秩序和节奏。它解决的是单个字母撑不起版面的问题适合做标题设计、字标、海报主视觉、短视频封面、PPT 大标题也适合前端做网页头图的文字装饰。这篇东西我会从为什么要叠、叠哪几个参数、在矢量工具里怎么做组件、在网页里怎么用 CSS 还原、以及最容易翻车的几种情况一路讲下来新手能照着做老手也能捞到几条避坑的经验。1. 叠字母到底在解决什么问题从视觉密度说起1.1 单个字母撑不起版面时的三条补救路线标题单薄是所有做视觉的人都会遇到的坎。版面给了一块空地你放一个词进去怎么看都像刚打完草稿。这时候常规的补救路线其实只有三条放大、加粗、加装饰。放大受版面边界和阅读距离限制放到某个点之后读者需要后退才能读完信息传递效率反而下降加粗受字体家族的字重上限限制多数无衬线字体到 800 或 900 就封顶了再加也只是同一种黑加装饰则是往字上加线、加框、加纹理风险最大弄不好就变成廉价感。叠字母属于第四条路也是被低估的一条它不改变字号不依赖字体本身有多少字重而是靠层次制造视觉重量。你在同样的字号下用两层错位的同形字母占据的视觉面积几乎翻倍但阅读距离没变字的骨架也没有被破坏。这是它最核心的价值——在不牺牲可读性的前提下增加视觉密度。我在实际项目里做过对比同一个标题纯单层、两层叠、三层叠放在 3 米外看两层和三层明显更抓眼放在 30 厘米内看两层的可读性几乎没有损失三层开始有点糊。所以我的默认结论是两层起步、三层封顶超过三层基本就是自娱自乐了。1.2 层叠带来的三个可量化收益说收益之前先说清楚可量化是什么意思——不是靠感觉说更好看而是有几个能数出来的东西在变。第一是视觉面积的覆盖率。单个字母的墨迹覆盖率通常在 15% 到 25% 之间取决于字重和字面率两层错位叠加后覆盖率的增量不是简单相加而是取决于位移量位移在 0.04 到 0.08 倍字号之间时增量最大超过 0.12 倍就开始出现两块分离的字读起来像重影而不是厚度。第二是边缘复杂度。人眼对复杂的边缘更敏感这是视觉注意力的基本规律。单层字母只有一圈轮廓层叠之后每一层的轮廓都参与进来边缘的信息量翻倍注意力自然被拽过去。这也是为什么很多字标设计喜欢用描边叠加而不是纯填充。第三是色彩阶梯的层次感。三层从亮到暗按 1 : 0.6 : 0.35 的比例衰减明度能在同一个色相里造出三个可辨识的平面读者会下意识把它理解成前后关系哪怕实际上它们都在同一个平面上。这个错觉很便宜效果却很稳定。1.3 什么时候不该叠我得说清楚这个方法的边界不然容易滥用。有几种情况我建议直接放弃叠字母。一是小尺寸场景。字号低于 32px或者印刷里低于 10pt的时候层与层之间的位移量小到无法分辨只会让笔画糊在一起看起来像印糊了。手机端的小标题、表格里的字段名、正文里的强调词都不适合。二是长文本。叠字母是标题级手法一段话叠起来就是灾难。哪怕只有两行第二行的层叠也会和前一行打架形成一片找不到入口的灰块。三是本身已经很复杂的字体。手写体、装饰体、带内嵌描边的字体笔画之间空隙本来就少再叠一层就直接糊死。这套手法最适配的是笔画干净、字腔开阔的几何无衬线或现代衬线。四是需要精确识别的场景。路牌、票据编号、验证码式的短字符任何可能引起误读的处理都不该上。叠字母会让相近字形比如两个竖笔组成的字母产生歧义这是硬伤。提示如果你不确定要不要叠先做一版单层的导出后缩到实际展示尺寸看一眼。很多在 100% 视图下很带感的层叠缩到真实尺寸就变成一团脏东西。2. 拆解层叠字效的四个可控变量2.1 字重差不是每层都一样粗绝大多数人第一次做叠字母是把同一个词复制三份直接错位结果看起来像印刷套印不准而不是设计。问题出在字重没有变化。我的做法是让最底层最粗往上逐层变细或者反过来。底层粗、上层细的好处是粗的那层在视觉上退后形成底托细的那层清晰锐利承担可读性。这个逻辑和阴影是一个道理——阴影永远比主体更模糊、更暗、更粗放。具体参数上如果字体家族提供多个字重我会用 900 / 700 / 500 这样的三级阶梯如果字体只有一个字重就用描边宽度来模拟字重差底层加 0.02em 的外描边中间层加 0.01em顶层不加。这个技巧在只有单一字重的字体上特别管用视觉上非常接近多字重叠加。还有一个更省事的替代方案底层用同一个字重但做 0.01em 到 0.015em 的膨胀在矢量软件里叫偏移路径在 CSS 里可以用 text-stroke 或者 -webkit-text-stroke 近似。膨胀量控制在字号的 1% 到 1.5%超过 2% 就开始丢笔画细节小写字母的 e、a 会先糊掉。2.2 位移量与轴向斜向比水平好看的原因位移量是叠字母里最敏感的参数。我的经验值区间是0.04em 到 0.10em具体取值看字号字号越大可用位移越小因为大字号下同样的 em 值绝对像素更大反过来小字号可以取到上限。轴向这件事值得单独说。水平位移、垂直位移、45 度斜向位移出来的气质完全不同。水平位移像运动模糊垂直位移像压印斜向位移最像厚度。原因是人的视觉系统默认光源在左上方斜向右下的偏移会被解释成投影这是几千年来形成的知觉习惯改不掉。所以我的默认选择是右下 45 度第二层偏移 0.05em第三层偏移 0.10em。如果版面本身有明确的光源暗示比如插画里有光影方向就跟着那个方向调整保持全局一致别一个标题右下、另一个标题左上。有一点要提醒斜向位移在字母的对角笔画上比如字母 A、V、W 的斜边会产生视觉上的加粗而在竖直笔画上只产生错位。这意味着同一串字母里不同字母的层叠强度其实是不一样的。做字标的时候要逐个字母检查必要时单独调整某个字母的位移量。2.3 明度与透明度阶梯1 : 0.6 : 0.35 是怎么来的色彩阶梯决定了层叠是否读得出来。我常用的比例是底层明度 100%相对顶层、中层 60%、底层 35%这是从大量试错里收敛出来的一个区间。为什么不是 80% / 60%因为相邻两层的明度差如果小于 25%在多数屏幕上看起来就是同一层白白增加了视觉噪音却没有产生层次。为什么不是 100% / 30% / 10%因为那样层次跳跃太大中间会显得断裂像三块不相关的字叠在一起。透明度是另一条路径。有些场景不适合改颜色比如品牌色被锁死这时用透明度做阶梯100% / 55% / 30%。透明度叠加的好处是能保留背景的颜色让层叠和底图产生互动坏处是背景复杂时半透明的层会失去轮廓糊在背景里。我的取舍原则是背景干净用透明度背景复杂用实色。背景是纯色或大面积渐变的透明度会让层叠更自然背景是照片或纹理的务必用实色否则底层会彻底读不出来。2.4 描边、投影与混合模式什么时候加什么时候忍住这三个是调味料加之前先想清楚要解决什么问题。描边解决的是层与层之间明度太接近导致边界不清。当背景和文字色差不大时给最上层加一圈 0.015em 的同色系描边或者对比色描边能把轮廓重新拉出来。但描边一加字重视觉上就变粗了需要相应减小字重或者缩小字号来补偿。投影解决的是层叠还不够需要更强的分离感。真正的投影模糊半径 0.05em 到 0.1em会让整个标题浮起来和层叠的厚度感是两种不同的表达。我一般不把投影和三层叠字母混用容易过载。混合模式是我用得最克制的一个。正片叠底在浅色背景上能让层叠产生油墨渗透的效果滤色在深色背景上能产生发光叠加的效果两者都很好用。但它们对背景色非常敏感换一个背景色整个效果就崩了所以只适合定稿、不适合做通用组件。变量推荐区间过量后果不足后果位移量0.04–0.10em层间分离读作重影糊成一块无厚度感字重差2–3 级 或 1%–1.5% 膨胀底层吞掉上层细节看不出层级像套印歪明度/透明度阶梯100 / 60 / 35断裂感像三块独立文字层间不可辨纯增噪描边宽度0.01–0.02em字腔被填死小写字母糊边界不清融进背景3. 用矢量工具做一组可复用的叠字母组件3.1 建字与骨架对齐先画网格再打字我见过太多人打开软件直接敲字、复制、错位做完发现整组字母的重心是歪的怎么调都别扭。问题出在没有基准。叠字母的所有偏移都建立在一个零位上这个零位必须明确。我的流程是先建一条基线和一条视觉中线。基线决定字母底部对齐的位置视觉中线决定整组字的重心——注意是视觉中线不是几何中线因为大写字母的视觉重心比几何中心略高大约在高度的 55% 到 58% 处这个经验值来自拉丁字母的传统比例大写字母的上半部分通常比下半部分略小所以重心偏上。网格建好之后把文字打上去转成轮廓这一步很重要转轮廓之后才能精确控制每个字母的膨胀和偏移而且导出时不依赖字体文件。转轮廓之后检查两件事一是字母之间的间距是否均匀二是字母的上下是否真的贴着基线和中线。很多字体本身带有一点点光学修正转轮廓后手动微调一下更稳。如果你要做的是可复用组件我建议把每个字母单独成组命名规范统一比如用字母本身做组名这样后面批量改位移的时候可以按组选择不会一锅端。3.2 分层与偏移的具体参数假设字号定为 100 单位用相对单位方便缩放我的分层参数是这样的顶层填充主色无描边位移 00中层填充主色的 60% 明度位移 55底层填充主色的 35% 明度外扩 1.5 单位位移 1010这里的 5 / 10 是相对 100 单位字号的换算成 em 就是 0.05em 和 0.10em。外扩只做在底层作用是让底托比上层稍微胖一点视觉上更稳重。外扩用偏移路径功能实现注意选圆角连接否则尖角处会出现毛刺。复制顺序上有个小技巧从顶层往下复制而不是从底层往上。因为你要保证新复制出来的层在视觉上是被压住的从顶层复制再往下挪层级关系天然正确反过来做经常需要手动调整图层顺序容易乱。另外三层做完之后不要急着定稿。把整组缩小到 25% 看一次这是最接近实际观看距离的检查。很多在 100% 下很精致的 1.5 单位外扩缩到 25% 之后完全看不出来等于白做——这种情况要么加大外扩要么干脆去掉用明度差来承担层级。3.3 分组、导出与批量替换做成组件的价值在于复用。我的做法是把三层叠好的字母整体打组然后在组上设置一个统一的外框也就是组件边界这样换字的时候只要进入组内替换文字内容偏移和配色都会保留。有个细节需要特别注意替换文字时每层的文字必须同步替换。三层是三个独立的文字对象如果你只换了顶层中底层还是旧内容成品就会出现错位重影——但这个重影是内容不一致造成的不是设计效果属于低级失误。我自己的做法是每次替换后把三层分别隐藏前两层看一眼确认内容一致。导出格式的选择上矢量稿优先导出 SVG因为它保留了所有路径信息放大缩小不损失而且可以直接嵌到网页里。导出时勾选轮廓化文字或者转换为路径确保不依赖字体同时把填充色写成十六进制不要依赖文档色板否则换个环境颜色会变。如果需要导出位图倍数至少给到 3 倍实际展示尺寸。层叠效果对边缘清晰度很敏感2 倍导出在高分屏上会有可见的锯齿尤其是斜向位移的那条边。3.4 我在这一步踩过的坑第一个坑是外扩方向搞反。偏移路径的时候如果不注意正负号字母会向内收缩小写字母的封闭区域比如字母 o 的内圈会被填死导出后就是一个实心块。遇到这种情况不要急着改参数先把偏移量归零看一眼原始形状确认方向再重新输入。第二个坑是不同字母的外扩量应该不同。同样 1.5 单位的外扩放在粗笔画字母上几乎看不出来放在细笔画字母比如字母 i 的点、字母 l 的竖上就会明显变胖导致整组字的字重不统一。我的处理办法是给细笔画字母单独减到 1.0 单位视觉上更协调。第三个坑是对齐吸附。矢量软件默认开启吸附你以为挪了 5 个单位实际上被吸到了 4.8 或者 5.2三层做下来误差累积看着就是歪的。做叠字母之前一定关闭对齐到像素以外的所有吸附或者干脆手动输入数值。第四个坑是层级命名的缺失。做单一标题无所谓做一组字标的时候十几个字母乘以三层就是几十个对象没有命名根本找不到谁是谁。我现在的习惯是统一命名格式比如用字母层号颜色的组合虽然啰嗦但省下来的调试时间远超命名成本。4. 在网页里还原同样的层叠效果4.1 用伪元素做层而不是复制标签前端实现叠字母最直觉的做法是复制三个标签各加一个 class。这个做法能用但我更推荐用伪元素原因有三个一是 HTML 结构干净语义上就是一个标题二是修改文案时只需要改一处三是伪元素的定位天然相对父元素不用额外处理包裹。基本的实现是这样的.stacked { position: relative; isolation: isolate; font-family: StackDisplay, system-ui, sans-serif; font-weight: 900; font-size: clamp(2.5rem, 8vw, 6rem); line-height: 1.05; letter-spacing: -0.02em; color: #f2ede1; } .stacked::before, .stacked::after { content: attr(data-text); position: absolute; inset: 0; z-index: -1; pointer-events: none; user-select: none; } .stacked::before { transform: translate(0.05em, 0.05em); color: #c9bfa6; opacity: 0.6; } .stacked::after { transform: translate(0.10em, 0.10em); color: #9d927a; opacity: 0.35; }配合 HTML 就是h1 classstacked>.shadow-stack { color: #f2ede1; text-shadow: 0.05em 0.05em 0 #c9bfa6, 0.10em 0.10em 0 #9d927a; }它的优势是没有任何额外的元素或伪元素性能开销最小劣势是阴影永远是纯色影子不会有描边、混合模式这些变化而且阴影不参与布局无法对单个层做动画。多重描边可以用-webkit-text-stroke配合伪元素但要注意这个属性只能设一条描边想做多层描边必须叠多个元素或伪元素。还有一点很坑-webkit-text-stroke的描边是居中描边会同时向内和向外扩展导致字的实际视觉字重变粗字腔变窄。解决方法是配合paint-order: stroke fill让描边画在填充层下面这样向内那部分被填充盖住视觉上就只剩向外的描边了。我的选择逻辑很简单只需要纯色偏移就用 text-shadow需要描边或者混合模式就用伪元素。两者不要混用混用之后层叠顺序会变得难以预测。4.3 缩放与响应式下的位移换算这是前端做叠字母最容易出错的地方。如果你用 px 写位移那么在 375px 宽的屏幕上字号可能只有 40px0.05em 就是 2px视觉上几乎不可见在 1440px 的屏幕上字号 96px位移 4.8px效果正常。同一个组件小屏上完全没有层叠感。解决办法是全部用 em 做位移单位。em 相对于元素自身的字号字号变化时位移自动等比缩放无需任何媒体查询。这是 em 在排版类样式里少数几个无可替代的用途之一。如果非要用 px比如为了和设计稿精确对应记得在媒体查询里同步调整media (max-width: 640px) { .stacked::before { transform: translate(2px, 2px); } .stacked::after { transform: translate(4px, 4px); } }还有一个隐藏问题clamp()配合vw做流式字号时字号的增长是非线性的而 em 位移是线性的两者在极端视口下会失配。大屏上字号增长放缓位移却按比例继续涨层叠会显得过分松散。我的做法是给位移也套一层 clamp上限锁死在 0.10em 对应的像素值。4.4 性能与可访问性性能上伪元素加 transform 的组合是很轻的transform 会走合成层不触发重排。但如果叠了filter: blur()或者多个text-shadow在低端设备上滚动时会有明显的掉帧。我实测过三层伪元素加模糊滤镜在中低端手机上滚动时帧率会掉到 40 左右去掉模糊之后回到 60。所以动画场景下尽量只用 transform 和 opacity。可访问性这块有个必须处理的点伪元素的content生成的内容部分屏幕阅读器会朗读出来导致标题被念三遍。处理方法是在父元素上给出明确的语义同时把伪元素的内容当作装饰处理。比较稳妥的做法是给父元素加aria-label同时在需要朗读的文本外层包一层视觉隐藏的元素把伪元素的内容用aria-hidden的思路隔离掉。伪元素本身没法直接加 aria 属性所以这个隔离要在结构层面完成。另外user-select: none和pointer-events: none一定要加在伪元素上否则用户框选文字的时候会选中三层重叠的文本复制出来是重复的三份内容体验很糟。5. 叠字母的常见翻车现场与排查链路5.1 叠完糊成一团先查明度不是查位置这是最高频的问题。很多人第一反应是位移太大了把位移从 0.08em 调到 0.03em结果还是糊。真正的原因通常是明度阶梯没拉开。我的排查顺序是固定的先看明度差再看位移最后看字重。第一步把三层分别单独显示看每一层是否还能辨认出字形。如果某一层单独看就已经糊了比如底层因为外扩过度导致字腔闭合那问题不在层叠在那一层本身的处理。第二步测量相邻层的明度差。用取色工具量一下如果差值小于 25%在 0–100 的明度刻度上直接加大差值别犹豫。我给的经验值是相邻层至少差 20 到 30 个明度单位。第三步才看位移。位移导致的糊特征很明显笔画交叉处形成一条实心的黑带。如果你的问题区域集中在字母的交汇处那就是位移过大。这个顺序很重要。我见过太多人反复调位移调了两小时最后发现是两层颜色几乎一样。5.2 导出后位移消失伪元素与打印流程的冲突网页上做好的叠字母导出成 PDF 或者打印时位移没了只剩一层。这个坑我踩过两次。原因是伪元素的content生成内容在部分打印流程中不被当做真实文本处理转 PDF 时会被丢弃或者合并。不同渲染引擎的表现还不一样同一个页面在浏览器里预览正常打印预览就是单层。排查方法很直接打开打印预览看一眼。如果预览里就是单层那就是这个问题没有别的可能。解决方案是改用真实 DOM 层。把三层写成三个实际的 span用绝对定位叠起来虽然 HTML 结构变复杂了但打印和导出的兼容性最好。如果你同时需要网页显示和打印可以做一个媒体查询屏幕下用伪元素打印时切换成真实层。顺带一提位图导出比如截图或者转图片不受这个问题影响伪元素会被正常渲染进去。5.3 中英混排时的基线错位这个坑特别隐蔽。中文字符和拉丁字母的基线对齐规则不同中文字符的底通常就是基线而拉丁字母有一部分会下探到基线以下比如小写字母的下伸部分。当你把中英混排的标题做层叠时那部分下探的字母会在偏移后和中文字符的底部撞在一起形成一块脏点。我的处理办法是分层单独检查基线。把中文字符和拉丁字符分成两组各自的位移量单独设定。中文的位移可以取大一点0.06em拉丁字母取小一点0.04em因为拉丁字母的笔画更细位移大了容易失去辨识度。还有一个更简单的方案如果版面允许尽量避免中英直接混排在同一个叠字母标题里。要么全中文要么全英文混排的层叠效果很难做到两边都满意。非要混排的话让中英文在视觉上分层——中文做底托英文做主体利用层叠本身制造前后关系这样基线差异反而变成了设计的一部分。5.4 移动端小尺寸下的塌陷同一个组件在桌面端很好看到手机上就变成一坨。原因前面讲过位移用 px 写死了字号缩了位移没缩。排查的时候有个快速判断法把浏览器窗口从宽拖到窄观察层叠感是逐渐减弱还是突然消失。逐渐减弱说明用的是 em 或者百分比只是字号下限太低突然消失说明有断点写死了 px某个断点之后位移没跟上。修复方案是给字号设一个下限低于这个值就关闭层叠media (max-width: 480px) { .stacked::before, .stacked::after { content: none; } }把伪元素的内容清空视觉上就退化成单层标题。这比硬撑着做效果要好——在小屏上保持可读性比保持风格重要得多。字号的下限阈值我一般设在 32px低于这个值层叠的收益就抵不上它带来的模糊了。6. 不同载体上的适配参数怎么跟着场景变6.1 海报与大幅面印刷把 em 换算成毫米大幅面印刷和屏幕的逻辑完全不一样。屏幕看的是像素印刷看的是物理尺寸和观看距离。一张 A1 海报挂在墙上观看距离大概 1.5 到 3 米这时候层叠的位移可以放得比屏幕上大得多因为人眼在远距离下对细节的分辨能力下降需要更大的视觉信号。我的换算方法是这样的假设标题字号定为 120pt位移取 0.08em也就是 9.6pt。1pt 在 300dpi 下约等于 4.17 像素9.6pt 大约是 40 像素也就是约 3.4 毫米。这个位移在 1.5 米外看是能分辨的在 3 米外就有点弱了需要提到 0.12em大概 5 毫米。印刷还有一个屏幕上看不到的问题套印和油墨扩散会让细小的间隙消失。屏幕上 0.5 毫米的间隙印出来可能就填死了。所以印刷稿的层间明度差要比屏幕稿更大我给的经验值是相邻层差 30 个明度单位以上而且尽量避免用特别细的描边低于 0.5pt 的描边在多数印刷工艺下都不稳定。6.2 短视频封面与竖屏海报位移朝哪个方向竖屏场景有个特殊性观众的注意力集中在画面中上部而且滑动的速度很快留给你的时间大概是 0.5 到 1 秒。这种情况下层叠的作用不是精致而是抓眼。我的调整是位移加大到 0.10 到 0.14em明度差拉到 35 以上层数减到两层。层数减是因为小尺寸下三层必然糊位移加大是因为快速滑动的场景需要更强烈的视觉冲击明度差拉大是为了在缩略图状态下也能看出层次。方向上我会偏向垂直向下而不是斜向。竖屏画面的水平空间窄斜向位移容易让文字整体向右倾斜视觉重心不稳垂直向下的位移更像投影而且在竖构图里能强化上下方向的引导。还有一点竖屏场景的标题经常压在图片上背景非常复杂。这时候千万不要用透明度做层叠必须用实色而且最好给整体加一点点深色描边或者半透明底色块保证在任何背景上都能读出来。6.3 演示文稿与数据看板克制是第一原则这类场景我几乎不用三层两层都算多的。原因是演示文稿的观看距离和阅读目的不同。观众是在读信息不是看设计任何增加认知负担的处理都是负资产。投影仪的色彩还原普遍偏差你在自己屏幕上精心调的 60% 和 35% 明度投到幕布上可能变成两块几乎一样的灰。我的做法是只在封面页和章节分隔页用叠字母内容页一律单层。封面页用两层位移 0.06em明度差 25 到 30不做描边不做投影。这样在大屏投影上既有一点层次又不会因为设备差异翻车。数据看板就更保守了。看板上的文字是工具不是设计元素任何层叠都会降低可读性。如果非要在看板标题上用一点视觉处理用一条下划线或者一个色块别用层叠。6.4 动态场景让层叠动起来的分寸层叠加动画是个诱人的方向但我建议非常克制。可行的做法是只让最外层动。比如最上层做 2 到 3 像素的轻微浮动或者鼠标悬停时三层同时向外扩散 0.02em形成散开的效果。这类微动效开销小不会干扰阅读还能增加一点趣味。不可行的做法是让三层分别做不同方向的位移或者旋转动画。视觉上会变成重影乱飞而且掉帧严重——三层独立 transform 加上文字重绘在移动端会明显卡顿。我试过给三层分别做 0.5 秒的错峰入场动画效果确实抓眼但滚动页面时帧率掉得厉害最后砍掉了。如果真的要做复杂动效我的建议是把它转成 SVG 或者直接用视频别用 DOM 硬扛。SVG 里的use引用同一个文字定义渲染开销比三个独立文字元素小得多而且天然支持图层顺序svg viewBox0 0 420 130 roleimg aria-labelSTACK defs text idword x10 y100 font-familysystem-ui, sans-serif font-size92 font-weight900 letter-spacing-2STACK/text /defs use href#word x10 y10 fill#9d927a opacity0.35/ use href#word x5 y5 fill#c9bfa6 opacity0.6/ use href#word fill#f2ede1/ /svg这个写法有个额外的好处defs里的文字定义只存一份三处use通过 x/y 偏移复用改文案时只改一处。而且 SVG 天生支持打印和无障碍标签前面提到的伪元素打印丢失问题在这里不存在。最后分享一个我用了很多年的小检查做完任何一组叠字母把它缩到手机屏幕的三分之一大小再眯起眼睛看。如果这时候还能看出这是三个字和它有点厚说明参数是对的如果只剩一团灰说明明度阶梯或者位移量有问题回去调。这个土办法比任何参数表都准因为它模拟的就是真实观众的第一眼。
