safari描边发虚是光栅化缺陷而非写法错误：-webkit-text-stroke硬绘轮廓、无亚像素抗锯齿，尤其在非retina屏、缩放非100%、小字号（≤16px）或细字体下易出现毛边、断笔、糊字；color: transparent会放大缺陷，导致缺口或内凹；可靠方案是改用svg text+stroke或8方向text-shadow，而非调参。

描边在 Safari 中发虚/锯齿是光栅化缺陷，不是写法错误

这不是你漏写了 -webkit-text-stroke 或颜色配错，而是 Safari（以及 Chrome、Edge）对 -webkit-text-stroke 的底层渲染机制决定的：它直接在文字轮廓外“硬画”一层像素边框，不参与亚像素抗锯齿，也不随缩放重采样。尤其在非 Retina 屏、系统缩放 ≠ 100%、或字体本身较细时，这种缺陷会被放大成明显毛边或断笔。

哪些参数组合会让 Safari 描边更糊

边缘粗糙不是随机出现的，它和几个关键参数强相关：

• -webkit-text-stroke-width 超过 1.5px 就容易发虚，2px 在 1x 屏上已可见锯齿，3px 基本不可用
• 小字号（≤ 16px）+ 描边 ≥ 1px → 笔画粘连、空心字内部“溢色”、中文“糊成一块”
• 用了 font-weight: 100 或 font-family 含极细无衬线体（如 'Inter', sans-serif）→ 描边直接吃掉主干，只剩毛边
• 叠加了 text-shadow 且模糊值（blur-radius）> 0 → 阴影与描边图层混叠，视觉上更毛

为什么加 color: transparent 反而更糊

空心字方案（color: transparent + -webkit-text-stroke）在 Safari 上更容易暴露渲染缺陷：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 描边变成唯一可见层，任何锯齿、断点、粗细不均都会被“放大观看”
• Safari 对 transparent 填充下的轮廓采样更保守，部分字形（如“口”“田”类闭合结构）边缘会出现微小缺口或内凹
• iOS Safari（尤其是 iOS 17.x 之前）对 transparent + 描边的 subpixel 渲染支持不稳定，同一行字可能部分清晰、部分发虚

真要保 Safari 清晰度，别硬扛 -webkit-text-stroke

想让描边在 Safari 里真正干净，最有效的方式是换技术栈，而不是调参数：

• 用 SVG <text></text> + stroke 属性：矢量描边，缩放不失真，stroke-linejoin: round 可控转角，iOS/macOS 全系稳
• 放弃描边，改用 8 方向 text-shadow（偏移 1px、模糊 0）：兼容性更好，Safari 渲染更一致，虽然不如矢量精准但足够日常标题用
• 如果必须 CSS 实现且只跑现代 Safari（≥ 16.4），可尝试 paint-order: stroke fill 控制层级，但仅限支持该属性的版本，旧版无效

描边这事，浏览器没给你留多少调优空间——看清支持边界，比反复试 width 和 color 更省时间。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！