text-stroke不兼容Firefox等Gecko内核浏览器，需用-webkit-text-stroke前缀并为Firefox准备text-shadow替代方案。
text-stroke不兼容老浏览器，别直接当主力方案用
Chrome、Safari、Edge（Chromium内核）都支持 text-stroke，但Firefox完全不认——连带所有基于Gecko的浏览器。这不是bug，是W3C还没把它推进到正式标准，Firefox团队明确表示暂不实现。
常见错误现象：text-stroke: 2px #000; 在Firefox里完全没效果，文字纯色显示，连降级提示都没有。
- 必须搭配
-webkit-text-stroke写（仅限WebKit/Blink内核） - 不能只写标准属性，得加前缀：
-webkit-text-stroke: 2px #000; - 如果要兼顾Firefox，得用
text-shadow模拟，但那是另一套逻辑，不是“降级”而是“替代”
text-stroke和text-shadow描边效果本质不同
text-stroke 是真正“描边”，它在文字轮廓上画线，内部填充由 color 控制；text-shadow 是投影，是往四周偏移复制一层或多层模糊/实色副本。
使用场景差异明显：
- 需要镂空文字（比如白字+黑边+透明背景）？
text-stroke可以配合color: transparent;实现，text-shadow做不到干净镂空 - 要描边带模糊或渐变？
text-stroke不支持，只能用text-shadow多层叠加模拟 - 描边宽度超过 6px 且要求精准对齐？
text-stroke渲染更稳定，text-shadow容易因像素对齐出锯齿
描边变粗后文字发虚？检查字体渲染和抗锯齿设置
大描边常伴随文字边缘模糊，尤其在Retina屏或Windows ClearType环境下。这不是 text-stroke 的错，而是系统字体渲染策略介入了。
关键参数影响：
-
-webkit-font-smoothing: antialiased;（macOS Safari/Chrome）能缓解过重描边导致的“糊感” -
font-smooth: always;在旧Safari中有效，但已废弃，慎用 - 避免同时设
text-stroke和text-shadow，二者叠加会加剧渲染冲突 - 某些字体（如中文思源黑体）在小字号+粗描边下天然易虚，换
font-weight: 700或更大字号更可靠
想让描边响应字号变化？别硬编码像素值
text-stroke 的宽度单位写 px 就锁死了，缩放或响应式时描边会显得过粗或过细。
正确做法是用相对单位：
- 用
em：-webkit-text-stroke: 0.08em #333;—— 描边始终是字号的8% - 用
rem也行，但要注意根字号是否动态变化 - 避免用
%，CSS规范不支持text-stroke的百分比宽度 - 如果用 CSS自定义属性控制描边粗细，记得在 :root 里定义为
em值，而不是px
实际应用中，最麻烦的不是怎么写，而是得时刻想着“这段文字会不会被用户在Firefox里看到”。描边看着酷，但一旦设计依赖它传递信息（比如警示色边框），就真得备好 text-shadow 的fallback路径——而且得手动测，别信自动polyfill。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
