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>