CSS文字描边（text-stroke）在Firefox中如何实现兼容？-css教程-PHP中文网

-webkit-text-stroke在firefox中完全无效，因其依赖的gecko内核未实现该属性，连-moz前缀都不存在；必须用8方向text-shadow（blur-radius为0）作为兼容性最佳的替代方案。

css文字描边（text-stroke）在firefox中如何实现兼容？

-webkit-text-stroke 在 Firefox 中完全不生效，这不是配置问题，而是 Gecko 内核根本没实现该属性——连 -moz-text-stroke 都不存在。想在 Firefox 里看到描边，必须换方案。

Firefox 不支持 `-webkit-text-stroke` 的根本原因

W3C 的 text-stroke 还卡在 Editor’s Draft 阶段，Firefox 团队明确表示暂不实现。Chrome/Safari/Edge（Chromium）靠 -webkit-text-stroke 渲染，Firefox 直接忽略整条声明，也不会报错或 fallback。写 text-stroke: 2px #000 或 -webkit-text-stroke: 2px #000，在 Firefox 里都等于没写。

用 `text-shadow` 模拟描边的实操要点

这是目前最轻量、兼容性最好的替代方案（IE9+ 全支持），但细节决定成败：

必须显式设置 color（哪怕只是 #000），若设 color: transparent，阴影会整体变淡甚至不可见——因为 text-shadow 是基于文字内容渲染的
4 方向不够：只写 text-shadow: -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000，会在 “W”、“X” 等斜线连接处露白
常规标题（≥24px）推荐 8 方向：补上 1px 1px 0 #000、-1px -1px 0 #000 等对角偏移
blur-radius 必须为 0，调大它只会变虚边，不是描边；想柔化边缘，宁可用 0.3px 偏移 + 极低透明度叠加，而非加模糊
避免在小字号（≤16px）上用，否则边缘锯齿明显，尤其非 Retina 屏

@supports 检测比 UA 判断更可靠

别用 JavaScript 判断浏览器类型，@supports 能直接问浏览器“你支不支持这个能力”：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

@supports (-webkit-text-stroke: 1px #000) {
  .title {
    -webkit-text-stroke: 1.5px #000;
    color: #fff;
    text-shadow: none; /* 清掉兜底的 shadow */
  }
}
/* Firefox 自动走下面这段 */
.title {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
               -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000;
}

注意：@supports (text-stroke: 1px #000) 是错的——标准属性当前无效，检测永远失败。