Gmail移除邮件HTML正文渐变效果该如何修复

Gmail 对邮件内CSS有严格的过滤规则，渐变效果失效是三个原因共同导致的：

• Gmail 会直接剥离<head>标签内<style>块定义的class选择器样式，编写的.gradient类规则完全不会被Gmail加载
• 渐变文字用到的background-clip: text属性不在Gmail的CSS支持白名单内，即便写在内联样式里也会被过滤
• 样式过滤逻辑存在非预期残留：-webkit-text-fill-color: transparent属性没有被完全移除，但是渐变背景、背景裁剪属性被删掉，最终文字变成透明，和白色背景融为一体，就出现了文字不可见的渲染结果
• 额外提醒：代码中用@font-face引入外部自定义字体的写法在Gmail、QQ邮箱等绝大多数主流邮箱里都不生效，会直接 fallback 到系统默认字体。

按兼容性优先级排序：

• 渐变文字切图替换（推荐）
  这是跨邮件客户端兼容性100%的方案。把需要做渐变效果的标题文字导出为透明背景的图片，插入到原标题位置即可，所有邮箱都能正常显示。记得给图片设置和原文字一致的alt属性，避免图片被拦截时用户看不到对应内容。
• 添加纯色兜底样式
  如果不想用图片，不要尝试调整CSS前缀、修改渐变写法，Gmail目前不支持纯CSS实现文字渐变，所有这类写法都会被过滤。必须给渐变文字设置和渐变主色接近的内联颜色兜底，保证样式失效时用户能看到正常颜色的文字，不会出现透明看不见的问题。
  兜底写法示例：

  <h1 style="font-size: 32px; font-family: 'Biennale-BlackIt', sans-serif; color: #E83448;">
      Hello
  </h1>
  

  注意所有样式必须直接写在标签的style内联属性里，不要依赖head里的class定义，Gmail对头部样式的支持极不稳定。
• 字体样式兜底
  不要依赖外部加载的自定义字体，在font-family配置最后加上系统默认无衬线字体sans-serif，避免自定义字体加载失败时排版错乱。

内容的提问来源于stack exchange，提问作者ene.andrei