text-shadow在ie9以下完全不支持,filter:drop-shadow()仅适用于纯色背景实心字体,png贴图需兼顾可访问性与多倍图适配。

text-shadow 在 IE9 以下完全不生效
IE6–IE8 根本不解析 text-shadow,连降级提示都不会给,直接当无效声明忽略。这不是写法问题,是渲染引擎层面缺失支持。
- 别试图用
filter: glow()模拟——它只对纯色文字有效,且会强制开启 hasLayout,引发盒模型错乱 - 若必须支持 IE8 及以下,
text-shadow应视为不可用特性,需彻底换方案 - 现代项目中建议直接放弃兼容,但需在构建时通过 PostCSS 插件(如
postcss-text-shadow-fallback)自动检测并报 warning
filter: drop-shadow() 替代 text-shadow 的边界条件
filter: drop-shadow() 看似能兜底,但它作用于整个元素的 alpha 通道,不是文字描边逻辑——这意味着背景透明、字体有镂空(如使用 font-feature-settings: "cv01")、或叠加了 background-clip: text 的场景下,阴影会漏出、变形甚至消失。
- 仅适用于纯色背景 + 实心字体 + 无混合模式的简单文本
- 参数顺序和
text-shadow不同:drop-shadow(x y blur color),没有 spread 参数 - 在 Safari 9.1 之前,
drop-shadow()对inline元素支持不稳定,建议包裹一层span并设display: inline-block
静态文字贴图的真正适用场景
用 PNG 贴图替代动态文字,本质是放弃可访问性与缩放能力,只应在极少数强视觉控制需求下启用:比如品牌 slogan 必须保持特定字重/间距/微调,且 SEO 和屏幕阅读器完全不敏感。
- 导出时用
font-smooth: never+ 高 DPI 截图,避免 macOS 下文字抗锯齿导致边缘发虚 - 必须配
aria-label或alt属性,否则 WCAG 2.1 AA 直接不达标 - 响应式页面中需配合
srcset提供 1x/2x/3x 多倍图,否则 Retina 屏下模糊到无法识别
最常被忽略的是字体加载时机:哪怕用了 filter 或贴图,如果 @font-face 加载失败,后备字体可能让阴影偏移量完全错位。真要保底,得在 JS 中监听 document.fonts.load() 再触发样式切换。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











