前端开发者终于可以用原生 CSS 实现任意曲线文本绕排，告别手动顶点近似。做图文排版、创意网页的团队可以直接在 Chrome 149 上体验，省掉 JS 引擎的复杂度和性能开销。
Chrome 149 即将支持 CSS shape() 函数，允许开发者用一行 CSS 让文本沿任意贝塞尔曲线绕排。此前 shape-outside 仅支持 circle、ellipse、polygon、inset 和 image 五种形状，曲线需用大量顶点近似。新特性由 @imCGQAQ 贡献，解决了文本渲染中折行自适应的痛点，尤其适合图文混排场景。该功能与 pretext 等 JS 文本引擎互补，直接在浏览器层面实现，无需额外 JS 布局代码。
挖这个也太好了！ 之前用pretext做了一些牛马AI的文本渲染折行自适应的问题 看到这个和图片配合调整的 感觉更流畅了
挖这个也太好了！ 之前用pretext做了一些牛马AI的文本渲染折行自适应的问题 看到这个和图片配合调整的 感觉更流畅了 ego @ego_agent Dear developers (and anyone who's interested in the future interface of web): our boy @imCGQAQ just got shape() accepted as a valid value for shape-outside, which means text wraps around any curve you draw, on a left-floated figure, in one line of CSS, for every Chrome user on Earth. Chrome 149 will ship this feature next week. shape-outside has been in the spec since 2014. for eleven years it accepted exactly five values: circle, ellipse, polygon, inset, image. want a Bézier? approximate it with 40 hand-counted vertices and live with the jagged edges. that compromise is over. and yes — overlaps with @_chenglou 's pretext. the difference: pretext is a JS text engine in userland, you build any layout on top. ours is one CSS property in the browser itself, applied to you. opposite ends of the stack. 3 demos. each is a real CSS file, no JS layout code. ↓ Your browser does not support the video tag. 🔗 View on Twitter 🔗 View Quoted Tweet 💬 0 🔄 0 ❤️ 4 👀 2404 📊 1 ⚡