CSS 文字描边生成器，免费
创建带描边效果的文字，带实时预览和可直接复制的 CSS 代码。
控制
预览
生成的 CSS
使用方法
- 输入您的文字：键入要以描边效果预览的文字。
- 调整描边设置：设置宽度（像素）、描边颜色、文字颜色、字号和字体家族。
- 复制 CSS：生成的 -webkit-text-stroke 和 text-stroke 属性可直接复制到您的样式表。
为什么使用 CSS 文字描边生成器？
CSS text-stroke 在字母周围添加描边 ， 这是标题、logo 和展示型文字中流行的设计技巧，用来呈现轮廓或空心字。手写正确的 CSS 语法需要记住 -webkit 前缀、单位和颜色格式。这款生成器让您可视化地预览效果，并即时产出可直接用于生产的 CSS。
功能特性
- 实时预览：调整设置时，描边效果会实时更新。
- 宽度控制：可从细线到粗壮描边随意设置。
- 完整颜色支持：通过颜色选择器或十六进制值设定描边和文字颜色。
- 字体选项：使用不同字体家族和字号预览，契合您的设计。
- 可直接使用的 CSS：输出包含 -webkit-text-stroke 属性及其标准等价写法。
常见问题
所有浏览器都支持 CSS text-stroke 吗？
-webkit-text-stroke 被现代浏览器广泛支持 ， Chrome、Firefox、Safari 和 Edge。在某些场景下仍需厂商前缀。请始终针对目标浏览器测试，并在必要时以 text-shadow 作为降级方案。
如何制作空心描边文字？
将文字颜色设为透明，然后添加描边颜色。这样就得到了仅显示描边的空心文字。配合 -webkit-text-fill-color: transparent; 和 -webkit-text-stroke 一起使用。
可以对任何字体使用 text-stroke 吗？
可以，text-stroke 对任意字体都有效。效果在粗体、厚实的字体上最为突出。细体字体在较大描边宽度下可能出现描边与字形重叠。
CSS 文本描边的起源
为字形描边的想法比 CSS 早了几十年;它原生于 PostScript(Adobe,1984)并被引入 SVG 1.1(W3C 推荐标准,第二版,2011 年 8 月 16 日),它定义了 stroke、stroke-width、stroke-linecap 和 stroke-linejoin 绘制属性,可用于任何形状,包括 <text>。当 Apple 于 2007 年 6 月在 Safari 3 中发布 -webkit-text-stroke 时,CSS 获得了自己的版本,与 -webkit-text-fill-color 一起。该属性从未在任何已发布的 W3C 规范中标准化;它在 CSS Text Decoration Module Level 4 编辑器草案中作为无前缀的 text-stroke 存在,但截至 2026 年,无前缀名称仍未在任何浏览器中启用。Firefox 49(2016 年 9 月 20 日)和 Edge 15(2017 年 4 月 5 日)都添加了 -webkit-text-stroke 作为显式的 Web 兼容性别名,以处理仅使用 WebKit 前缀名称的页面。在生产中,请使用前缀。
在 Web 上描边文本的三种方法
在文本周围绘制轮廓的方法不止一种。正确的工具取决于宽度、可读性预算以及底层字形是否需要保持清晰:
-webkit-text-stroke,本生成器输出的属性。一行 CSS,GPU 合成,任何帧率都免费。描边以字形轮廓为中心绘制,一半在内,一半在外,这意味着粗描边会开始侵蚀字母形状。- 四方向
text-shadow,通用的回退,可在所有可追溯到 IE 10 的浏览器中工作。text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;在每个角落堆叠四个 1 像素阴影以伪装 1 px 轮廓。在 CSS Text Decoration Module Level 3(W3C 候选推荐 2019 年 8 月)中定义。在更宽的描边中,阶梯状伪影变得可见;八个或十六个方向可以平滑它们,代价是更多的阴影。 - 带有
paint-order: stroke fill;的 SVG<text>,当您需要厚描边而不让墨水渗入字母时的正确答案。paint-order属性首先绘制描边,然后在顶部绘制填充,因此填充保持其完整的广告宽度。
无障碍:对比逻辑,正文不行,装饰可以
WCAG 2.1 成功标准 1.4.3 「对比度(最低)」(W3C 推荐 2018 年 6 月 5 日)要求 正常文本对比度为 4.5:1,大文本(18 pt / 14 pt 粗体)为 3:1。应用描边后,字形的视觉主导边缘是描边颜色,因此对比检查必须比较 该 颜色与背景,而不是填充。常见失败:白色背景上带细黑描边的黄色徽标,如果检查黑色与白色则通过,但字母主体是白色上的黄色,小尺寸下阅读效果差。描边会破坏正文文本的可读性。在 16 px 字体大小以下,1 px 描边填充字形内部的 10% 到 15%,2 px 描边可以闭合反白(「a」、「e」、「o」中的孔洞)。将文本描边保留给标题、展示型字体和装饰用途;在没有在每个断点进行明确测试的情况下,绝不要将其应用于段落文本。
什么时候文本描边是正确的工具
- 漫画书和游戏 UI 标题:经典的 Marvel / Nintendo 粗黑描边、明亮填充的外观。
- 水印和装饰叠加:仅半透明描边、无填充,坐落在图像之上。
- 教程图形、屏幕截图、提示,其中文本必须在未知背景上突出。
- 「幽灵」按钮,其中按钮文本使用描边和透明填充,以使其与带边框的按钮本身在权重上相匹配。
- 仅轮廓标题,在编辑设计中,2010 年代后期流行的「空心字母」外观。
常见错误
- 忘记
-webkit-前缀。无前缀的text-stroke仅处于编辑器草案状态,未发布。在生产中始终编写带前缀的形式。 - 尝试为
-webkit-text-stroke-width制作动画。它不在可动画 CSS 属性列表中。过渡将「跳变」而不是补间。需要运动时,请为text-shadow制作动画或使用 SVG。 - 将描边应用于小文本。在 16 px 以下,描边会填充字形内部并关闭反白。使用媒体查询设置最小字体大小保护。
- 将宽描边与紧
letter-spacing结合。描边在相邻字形之间交叉,并在形状接触的地方产生灰色污点。 - 在对比度检查中将描边颜色计为「文本颜色」。填充和描边都必须通过 WCAG 1.4.3 对背景的检查。
- 不测试打印样式表。打印时描边可能渲染得明显更粗或更细,特别是在为 PDF 输出降级颜色域的浏览器上。
更多常见问题
为什么我的描边在 Retina 显示器上看起来比在 1080p 显示器上更粗?
不是的,在 CSS 像素中。2px 描边在两者上恰好是 2 个 CSS 像素。改变的是感知锐度:在 Retina(2× DPR)显示器上,2 个 CSS 像素的描边是 4 个设备像素,可以干净地抗锯齿。在 1× 显示器上,2 个设备像素给出明显更模糊的边缘。如果您需要在 Retina 上对齐到一个设备像素的发丝线,写 0.5px;浏览器在高 DPR 屏幕上四舍五入到一个设备像素。
我可以为每个字母设置不同的描边颜色吗?
不能使用单个 -webkit-text-stroke 声明。要么将每个字母包装在 <span> 中并单独设置样式,要么使用具有自己的 stroke 属性的 SVG <tspan> 元素。如果只需要第一个字母不同,::first-letter 伪元素接受 text-stroke。
描边多粗算太粗?
实际的上限大约是 字体大小的 8%。在 100 px 字体下,那是 8 px 描边;超出此范围,字母开始相互重叠。如果您想要更粗的轮廓视觉,请使用带有 paint-order: stroke fill; 的 SVG <text>,以便填充保持原始宽度,描边仅向外扩展。
-webkit-text-stroke 适用于表情符号吗?
在彩色表情符号(现代浏览器中的默认值)上,描边应用于表情符号字形的外部轮廓。结果通常很微妙,因为表情符号已经有自己的轮廓和阴影。对于黑白表情符号(text 字体变体),描边像任何其他字形一样干净地应用。
是否有任何东西被发送到服务器?
没有。您输入的预览文本、您选择的颜色以及生成的 CSS 都在您浏览器的 JavaScript 中处理。不进行网络调用。在 DevTools 的网络选项卡中验证。