CSS中的多描边文本效果尝试
2026年4月11日，有人过去常看到复古的多描边文本效果，尝试用CSS的 `text - stroke` 属性复刻，却效果不佳。因为 `text - stroke` 只能接受单一值，堆叠元素的办法也不管用。去年一个晚上，此人读《Graphic Japan : from woodblock and zen to manga and kawaii》（《日本平面设计：从木刻、禅意到漫画与可爱风》）时又看到这种文本效果，便再次尝试。
意外接近的效果
不断堆叠多个元素，并偶然为每一层设置不同的 `text - stroke - width`，这次效果更接近了。给出了相应的CSS代码：
--c: #cc0d55;
--n: @i(-1);
@grid: 36x1 / 240px;
@content: '✱';
position: absolute;
inset: 0;
font: 100px/0 sans - serif;
color: var(--c);
z - index: @I(-@i);
-webkit - text - stroke - color: @pn(--c, #f4e1e8);
-webkit - text - stroke - width: $em(.08n+.02(1 - (-1)^n));
原理剖析
对于不同的 `text - stroke - width` 值，浏览器会自动绘制字符的轮廓。描边宽度越大，轮廓越粗且保持字符原始形状。给出相关CSS代码：
@grid: 7x1/ 360px auto noclip;
@content: '✱';
font: 50px/0 sans - serif;
color: transparent;
-webkit - text - stroke - color: #cc0d55;
-webkit - text - stroke - width: @i(*1.8px);
下一步是使用不同颜色并按顺序排列，也给出了对应CSS代码：
@grid: 12x1/ 100px ß #f4e1e8;
@content: '✱';
position: absolute;
inset: 0;
z - index: @I(-@i);
font: 50px/0 sans - serif;
color: transparent;
-webkit - text - stroke - color: @pn(#f4e1e8, #cc0d55);
-webkit - text - stroke - width: @i(*3px);
有趣的是，不同浏览器绘制字符轮廓的方式不同，Firefox的渲染效果比Chrome和Safari更平滑。还有个有趣现象，当有更多文本内联排列时，字符形状会合并，给出代码：/* ... */ @content: '秋收冬藏';
尝试不同字体
最终效果很大程度取决于选择的字体。为快速尝试不同字体，添加了 `@google - font` 函数加快字体加载速度，并给出了不同字体的CSS代码示例：
--c: #cc0d55,#fff;
@grid: 34x1 / 320px;
@content: 'b';
font: 150px/0 @google - font(Matemasie);
@place: center;
z - index: @I(-@i);
color: @pn(--c);
-webkit - text - stroke - color: @pn(--c);
-webkit - text - stroke - width: @i(-1, ease, *12px);
font - family: @google - font(Matemasie);
@content: 'b';
--c: #cc0d55,#fff;
@grid: 30x1 / 320px;
:after {
content: 'Love';
position: absolute;
}
font: 80px/0 @google - font("Pacifico");
@place: center;
z - index: @I(-@i);
color: @pn(--c);
-webkit - text - stroke - color: @pn(--c);
-webkit - text - stroke - width: @i(ease, -1, *15px);
font - family: @google - font(Tangerine);
@content: 'Love';
--c: #fff9e0,#f1c550,#ff6600,#ce2525;
--c: #cc0d55,#fff;
@grid: 30x1 / 320px +2 ~0 -10%;
:after {
content: '+';
position: absolute;
}
@place: 50% 50%;
font: 120px/0 @google - font("Cherry Bomb One");
z - index: @I(-@i);
color: @pn(--c);
-webkit - text - stroke - color: @pn(--c);
-webkit - text - stroke - width: @i(ease, -1, *12px);
font - family: @google - font('Cherry Bomb One');
@content: '+';
性能问题与更多示例
这种效果的性能和CSS滤镜一样差，字体变大时会有闪烁。对于实验或用css - doodle生成图像还可接受，但不适合生产环境。这里还有两个通过css - doodle生成的示例，用于尝试不同颜色和字符，仅供娱乐。
