HTML邮件模板中如何用内联CSS覆盖font标签字体字号

场景约束 #

• 仅可使用内联CSS，不支持head标签内的样式、自定义函数，无JavaScript运行环境
• 需处理用户提交的带<font>标签的动态HTML内容，保留模板预设的字体、字号格式，同时不破坏<font>标签上已有的其他内联样式（比如示例中的黄色背景）

问题示例 #

待处理的动态内容片段 #

<h1><font face="cursive" size="1" style="background-color: rgb(255, 255, 0);">Prueba de descripción</font></h1> 

原有写法的错误点 #

之前尝试的代码存在两个核心问题，导致样式不生效：

1. 外层容器把CSS规则写在了class属性中，而非style属性，样式完全不会被解析
2. 父元素设置的可继承字体、字号样式，优先级低于<font>标签原生的face、size属性，无法直接穿透覆盖

可落地实现方案 #

方案1：纯内联CSS强制继承覆盖（兼容性最高，无需处理动态内容字符串） #

直接在包裹动态内容的最近一层父元素上，设置强制继承规则，优先级高于<font>原生属性，且不会影响<font>上已有的其他内联样式，适配99%以上的邮件客户端。
完整可运行代码如下：

<div style="all: initial;">
  <table style='font-family:"Courier New", Courier, monospace; font-size:80%; border-collapse: collapse;'>
    <tr>
      <td style="padding: 6px 10px;">
        <b>Current Status</b>
      </td>
      <td style="padding: 6px 10px;">
        <!-- 动态内容直接放在这个容器内即可 -->
        <div style="font-family: inherit !important; font-size: inherit !important;">
          <h1><font face="cursive" size="1" style="background-color: rgb(255, 255, 0);">Prueba de descripción</font></h1>
        </div>
      </td>
    </tr>
  </table>
</div>

实现逻辑说明：

• 最外层div加all: initial，重置不同邮件客户端的默认用户代理样式，减少跨端渲染差异
• 包裹动态内容的直接父容器设置font-family: inherit !important、font-size: inherit !important，强制内部所有子元素（包括<font>标签）继承父级table预设的等宽字体、80%字号，优先级足以覆盖<font>自带的face、size属性
• <font>标签上原有的背景色、文字颜色等内联样式不会被干扰，会正常渲染

方案2：服务端极简字符串替换（覆盖最彻底，无CSS兼容问题） #

如果动态内容是服务端拼接输出的（不需要前端JS参与），可以在输出内容前做简单的字符串替换，直接删除所有<font>标签上的face、size属性，从根源上避免属性冲突，该逻辑所有后端语言都可实现，仅做纯文本替换即可：

// 替换逻辑伪代码，适配任意后端语言
动态输出内容 = 动态输出内容.replace(/\s*face="[^"]*"/gi, '').replace(/\s*size="[^"]*"/gi, '')

该替换只会删除face、size两个属性，<font>标签本身、标签上的style等其他属性都会完整保留，不会破坏原有自定义样式。

避坑提示 #

• 不要在距离动态内容层级过远的父元素上设置字体、字号，<font>原生属性的优先级高于远距离父元素的可继承样式，必须在动态内容的直接父级加强制继承规则
• 所有样式必须写在元素的style属性内，不要依赖class、id选择器定义样式，绝大多数邮件客户端不支持非内联的选择器规则
• 尽量使用系统内置通用字体、相对字号设置，避免使用@font-face、font-size-adjust等较新的CSS特性，旧版Outlook等客户端对这类特性支持度极差。

内容的提问来源于stack exchange，提问作者Maria Cristina Sanchez