描边文字

什么时候用

• 首屏大标题、封面字，想要比实心字更轻的体量
• 深色或图片背景上，需要文字有明确的轮廓边界
• 做「描边 + 实心」两层排版，一虚一实叠出层次

适用场景：文字 / 页面 / 卡片

推荐取值

描边宽度

1–3px（大字号）

建议字号

≥ 32px

绘制顺序

paint-order: stroke fill

空心写法

color: transparent + -webkit-text-stroke

对比度

正文级别的文字 ≥ 4.5:1

别搞混

• 和「文字阴影」的区别

  text-shadow 画在字形外面，字本身的分量不变；text-stroke 是沿字形轮廓描一圈，笔画会被描边吃掉一半，字看起来更细。

• 和「渐变文字」的区别

  渐变文字填充的是字形内部；描边字内部是空的。想要「渐变填充 + 描边」就把两者叠加。

  容易混的去看「渐变文字」

容易踩的坑

• -webkit-text-stroke 是非标准属性（三大引擎都支持），它从轮廓中线向两侧画：小字号加粗描边会把细笔画糊掉，所以只给大字号用
• 描边宽度用 px 固定，别用 em 跟着字号放大，否则大标题上的笔画全被吃掉
• 只描边不填充时必须保证对比度：空心字放在浅色底上几乎看不见
• 加 paint-order: stroke fill 能让描边先画、填充后画，避免描边压住字面
• 描边色和填充色相同时，效果等于把字加粗，容易显得脏
• 不要为了描边去用 SVG path 假字：读屏和文本选择都会坏掉

无障碍降级

描边文字是静态的，不需要降级；如果给它加了进出场描边动画，prefers-reduced-motion 下直接显示最终态。

关键词

• -webkit-text-stroke
• text-stroke
• paint-order
• outlined text
• hollow text
• color: transparent
• @supports
• stroke-width

参考

• MDN · -webkit-text-stroke
• MDN · paint-order

相关展品

• T-03渐变文字Gradient Text
• T-01流体排版Fluid Type