text-stroke 在 Chrome/Firefox 中可用，Safari 16.4+ 才可靠支持；旧版 Safari 忽略该属性且无回退，需用 text-shadow 模拟四向描边，并注意兼容性与布局影响。
text-stroke 在 Chrome/Firefox 中能用，但 Safari 16.4+ 才真正可靠
不是所有浏览器都支持 text-stroke，Safari 从 16.4 版本起才修复了多行文字描边错位、伪元素下失效等问题。Chrome 和 Firefox 支持较早，但旧版 Safari（如 iOS 15）会直接忽略该属性，且不触发回退机制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须搭配
-webkit-text-stroke使用，标准写法是先写-webkit-text-stroke，再写text-stroke - 不要指望它在 IE 或微信内置浏览器（X5 内核）中生效——它们完全不识别
- 若需兼容老 Safari，得用
text-shadow模拟（见下一条）
用 text-shadow 模拟描边时，4 个方向阴影缺一不可
text-shadow 是目前最稳妥的描边降级方案，但只写单个阴影（比如 text-shadow: 1px 0 0 #000）只能“半边描边”，视觉上明显不对称，尤其字体较粗或字号较大时更突兀。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 至少覆盖上下左右四个正交方向：
text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000 - 如果想更饱满，可加 45° 角补全（共 8 个值），但性能开销略增，小字号文字没必要
- 注意：
text-shadow的模糊值（第三个参数）设为0，否则边缘发虚，不像真实描边
Bootstrap 本身不提供 text-stroke 工具类，得自己加 CSS
Bootstrap 5.x 的 utilities（如 .text-primary）只控制颜色、大小、权重，没有描边相关 class。试图用 data-bs-* 或 style="text-stroke:..." 写内联样式，既难维护又无法响应式。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在自定义 CSS 文件中添加类似
.text-stroke-2px { -webkit-text-stroke: 2px #333; text-stroke: 2px #333; } - 若需响应式描边粗细，可用 Bootstrap 的断点配合
@media，例如@media (min-width: 768px) { .text-stroke-md { -webkit-text-stroke: 1.5px #000; } } - 避免对
.btn或.alert等组件全局加描边——它们已有背景、边框、阴影，叠加后易显脏
描边会让文字实际占用空间变大，可能撑破容器或换行异常
text-stroke 和 text-shadow 都不会改变 font-metrics，但视觉宽度确实增加。尤其当描边 >1.5px 且字体较细（如 font-weight: 300）时，文字可能超出 max-width，或在 flex 容器中触发意外换行。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给描边文字加
box-sizing: border-box没用——描边不参与盒模型；真正有效的是微调letter-spacing或缩小font-size0.5px 补偿 - 在
display: inline元素上用描边时，务必检查父容器line-height是否足够，否则描边底部会被裁切 - 使用
transform: scale()缩放文字来“挤出”描边空间？别试——会模糊，且破坏可访问性
描边看着简单，但字体渲染引擎对它的处理差异比想象中大得多；最麻烦的往往不是怎么写，而是怎么让同一段 CSS 在不同设备上看起来“差不多”。
