YL

TEXT EFFECT

描边文字Outline / Stroke Text

只有轮廓、内部镂空的大字,常与实心版本叠用做层次或做背景水印。

效果预览

OUTLINE

适合用在哪

超大标题的第二层、装饰性背景大字、需要「轻」一点的大字号场合。小字号不要用,笔画会糊在一起。

容易踩的坑

  • 描边字放在花哨图片上,1.4px 轮廓会被背景纹理吞没。
  • -webkit-text-stroke 是居中描边,细字重时笔画内部会被填满变糊。
  • 作为背景水印却未设 aria-hidden,读屏会重复读出装饰大字。

设计提示词 · Prompt

描边文字(Outline Text):把 color 设为 transparent,用 -webkit-text-stroke:1.4px 主色(同时写标准 text-stroke 做渐进增强)。字号至少 28px 起,越大越好看;字重 800 让轮廓更挺。常见组合是与实心版本错位叠放(实心在上偏移若干像素,描边在下),或把描边文字放到很大字号、低透明度当背景水印。备选实现是 SVG <text> 配 stroke + fill:none,兼容性更好。
Outline Text: set color to transparent and use -webkit-text-stroke:1.4px in the primary color (also write the standard text-stroke for progressive enhancement). Font size at least 28px, and the bigger the better; font weight 800 keeps the outline crisp. Common combos are offsetting it against a solid version (solid on top shifted a few pixels, outline beneath), or setting the outline text very large at low opacity as a background watermark. An alternative implementation is SVG <text> with stroke + fill:none, which has better compatibility.

常见搭配

同一页面里经常和「描边文字」一起出现的模式,可以收藏后用「组合收藏为整页提示词」一起交给 AI。

演示 HTML 结构

<div class="s d-center">
  <div class="tx-outline">OUTLINE</div>
</div>

标签