文字沿路径排列：8个CSS与JavaScript实现技巧

我最近做了一个产品发布页，设计稿里有一行文案要求“顺着画面里那条虚线轨道绕出去”。刚开始我觉得不难，无非是排几个字，结果真写起来才发现，普通流式排版根本做不到让文字贴着任意曲线走，而且动效一多，浏览器性能就开始欺负人。断断续续调了两天，我把能用的方案和之前草稿箱里的试验重新筛了一遍，最后整理出 8 个 CSS 和 JavaScript 代码片段，专门解决“文本路径”这一类创意排版需求。

“文本路径”这个词听着有点学院派，实际做落地页、活动页时你会经常遇到：标题不是横平竖直地排在盒子里，而是像被一条看不见的轨道推着走，或者要沿着某条山路、导视线的方向出现。这类效果对日常前端来说不算高频，但真碰到设计师发来“文字沿曲线排列”的稿子时，很多人的第一反应是直接引一个动画库，或者翻出厚重的 SVG 教程从头啃。其实多数页面需要的东西没有那么多，用 CSS 加少量原生 JavaScript，完全可以覆盖八成场景。

这份总结适合谁？适合正在做活动页、落地页、品牌介绍页的开发者；适合对 SVG 只了解基础、不想引入整套重型动画框架的人；也适合想给“普通的标题”加一点曲线感但不清楚从哪下手的新手。我会把 8 个代码片段按 CSS 优先和 JavaScript 介入分成两类，不只贴代码，还讲清楚每一个到底能做什么、为什么这么写、在真机上会踩哪些坑。

1. 这次为什么会收集“文本路径”这组片段

1.1 “文本路径”到底是什么

先说一个容易被忽略的点：Web 上最普通的文字，并不是“自由”的。一张页面在浏览器里解析后，文本默认会沿着一个矩形区域从左到右排开，碰到行尾再折到下一行。这个矩形排版模型对阅读非常友好，但如果你想做“创意文本路径”，它就成了第一道拦路虎，因为文字不会天然按你画好的贝塞尔曲线走。

要实现“让文字沿路径走”，业界其实只有几条主流技术路线。第一种是 SVG 的 <textPath>，把文字挂到一条 <path> 上，文字会像火车一样沿着铁轨方向排布。第二种是把一段字符串按字符拆开，用 CSS transform 或者 JavaScript 给每个字单独设置位置和角度，自己“模拟”出一条路径。第三种是 CSS offset-path，让一个文本块沿着运动路径走，这个跟文字本身的字符排布关系不大，更接近“文字作为一个整体在轨道上移动”。第四种是利用 CSS 的 clip-path、mask、background-clip 等属性，在不需要真实几何路径的场景里做出视觉引导感。

我这次留下的 8 个代码片段，本质上就是这四条路线的具体化：有真路径，有模拟路径，也有视觉上的“伪路径”。做项目时先分清楚你要的是哪一种，能少走很多弯路。

1.2 我挑选片段时的三个标准

整理这组代码之前，我先经历了很长一段“什么效果都想要”的阶段。真正让我停下来的，是项目中性能和兼容性的现实问题。做了三版 demo 以后，我给自己定了三条筛选标准，分享出来供参考。

第一，能用原生 CSS 解决的，就不为一个小标题引入 GSAP 或 Three.js。动画库很强大，但为了一个标题去增加 60KB 以上依赖，在移动端并不划算。第二，静态路径和动态路径要分开考虑。一个纯排版的弧形标题，用 SVG textPath 几行代码就结束；一个要跟随滚动的路径，就必须留给 JavaScript 处理。两者混在一起写，很容易把代码改成意大利面。第三，所有效果都要有“降级方案”。比如在旧浏览器里 textPath 不生效时，页面至少要能正常显示一段横向文本，而不是直接白屏或跑版。

这些标准听起来普通，但在项目里真的救过我。尤其最后一条，很多创意标题会覆盖在首屏最重要的视觉区域，如果效果代码出了兼容问题，用户第一个看到的就是错误画面。

2. 八段代码的整体选型：先决定用哪一段

2.1 一张速查表看清八段代码

这 8 个代码片段不能一上来就一个一个贴，否则读者容易失去上下文。我建议先看选型表，再按项目需求挑，最后回来看详细代码。

这里要提醒一下：第 3 和第 4 条并不是严格意义上的“几何路径排版”，它们更像是在平面设计里用颜色、切角、渐变给读者造出一条视线路径，让标题和下一屏的内容产生引导关系。很多时候设计师说的“路径感”并不是真的要文字弯曲