text-shadow 是实现单层文字描边最简单、兼容性最好的方式，需用4–8个0模糊度阴影覆盖多方向，避免单阴影导致的斜角效果；-webkit-text-stroke 仅限 WebKit 内核，不兼容 Firefox 和旧 Edge。
text-shadow 实现单层描边最简单可靠
直接用 text-shadow 是 HTML/CSS 中实现文字描边最通用、兼容性最好的方式，不需要 SVG 或 canvas。它本质是给文字加投影，但通过多方向偏移+相同颜色，就能模拟出均匀描边效果。
常见错误是只写一个阴影（比如 text-shadow: 1px 1px 0 #000），结果只有右下角有“边”，看起来像斜角阴影而非描边。正确做法是叠加 4–8 个方向的 0 模糊度阴影：
-
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;（4 方向，适合小字号） - 更厚描边可加中间层：
0 0 0 #000, -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000（5 层，覆盖上下左右+自身） - 注意：所有阴影的
blur-radius必须为0，否则边缘发虚，不是清晰描边
webkit-text-stroke 只在 WebKit 内核生效且不支持 IE/Edge Legacy
-webkit-text-stroke 看起来更“正宗”，语法也简洁：h1 { -webkit-text-stroke: 2px #ff0000; }，但它实际是 Safari 和 Chrome 的私有属性，Firefox 完全不支持，旧版 Edge（EdgeHTML）也不认。如果你的项目必须兼容 Firefox 或需要稳定跨浏览器，别单独依赖它。
使用场景有限：适合仅面向 Chrome/Safari 的内部工具、活动页；或配合 text-fill-color: transparent 做镂空文字（此时描边就是主体）。但要注意——-webkit-text-stroke 无法控制描边位置（只能居中），也不能单独设置内外描边。
立即学习“前端免费学习笔记（深入）”；
- 描边宽度单位建议用
px，避免缩放时失真；em或rem在字体变化时易出错 - 和
color冲突：如果没设text-fill-color，描边会叠在实色文字上，可能看不出效果 - 不能与
text-shadow混用——WebKit 下两者会叠加，导致描边过重或模糊
描边在高清屏（Retina）下变细？用像素倍数补偿
在 MacBook、iPhone 等设备上，CSS 像素被缩放，1px 描边可能渲染成物理 0.5px，肉眼看起来发虚甚至消失。这不是 bug，是设备像素比（dpr）导致的渲染限制。
解决方法不是盲目加大描边宽度，而是按 dpr 倍数微调。例如对 2x 屏，把 text-shadow 的偏移量从 1px 改成 0.5px，同时补足更多方向：
/* 针对 dpr ≥ 2 的适配 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.stroke-text {
text-shadow:
-0.5px -0.5px 0 #000,
0.5px -0.5px 0 #000,
-0.5px 0.5px 0 #000,
0.5px 0.5px 0 #000;
}
}- 不用 JavaScript 动态判断 dpr，纯 CSS 媒体查询更轻量
- 避免用
transform: scale(0.5)反向缩放——会导致文字锯齿、行高错乱 - 如果项目已用 PostCSS，可用插件如
postcss-retina-bg-img类思路扩展，但文字描边目前无成熟自动方案
SVG 标签描边最精准但 DOM 开销大
当需要精确控制描边线型（虚线）、端点（round/miter）、甚至路径文字时，<text> + stroke 是唯一选择。它不受字体渲染差异影响，描边完全由 SVG 渲染引擎控制。
但代价明显：每个文字都要包裹进 SVG，DOM 节点数激增；不能继承页面字体栈（需显式设 font-family）；SEO 不友好；响应式排版难处理（viewBox 缩放会影响 stroke-width 物理尺寸）。
- 基础写法：
<text x="10" y="30" fill="#fff" stroke="#000" stroke-width="2">Hello</text> - 要保持描边粗细随缩放不变，用
vector-effect="non-scaling-stroke"（但 IE/Edge 不支持） - 动态生成大量 SVG 文字时，务必做节流或虚拟滚动，否则滚动卡顿明显
描边看着简单，真正上线时最容易翻车的是高清屏适配和 Firefox 兼容性——前者常被忽略到上线后用户反馈“字看不清”，后者则让运营同学改完文案发现描边没了。留个心眼，先跑一遍 Firefox 和 Safari 再合代码。
