Outlook移除font-family样式致Century Gothic字体不生效求解决建议

问题描述 #

近期Outlook出现移除或覆盖字体样式的问题，在Email on Acid平台测试正常，但移动设备邮件客户端、苹果桌面端及Gmail中，Event Header无法正确显示为Century Gothic字体。
使用Foundation for Emails框架开发，测试发现span标签替换了字体设置，且h2的行内样式丢失。此前Times New Roman也出现同类问题，将外链样式表改为内嵌后该字体问题解决，但Century Gothic的问题仍未修复，此前该配置可正常运行，疑似Outlook规则发生变更。

已尝试未生效方案 #

• 通过CSS定义span样式
• 通过标准链接和@import引入托管字体
• 在外层嵌套携带font-family行内样式的span标签
• 将h2标签替换为span标签
• 添加条件语句

相关代码 #

Foundation for Emails生成代码 #

<th style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:'EB Garamond',serif;font-size:20px;font-weight:400;hyphens:auto;line-height:1.3;margin:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left;vertical-align:top;word-wrap:break-word">
  <h2 class="size25music text-center" style="Margin:0;Margin-bottom:10px;color:#000;font-family:'Century Gothic',CenturyGothic,AppleGothic,sans-serif;font-size:25px;font-weight:400;line-height:25px;margin:0;margin-bottom:10px;margin-top:18px;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:center;word-wrap:normal">Event Header</h2>
  <p class="p2 musicP" style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:'Times New Roman',Times New Roman,Times,serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;margin-bottom:10px;margin-left:24px;margin-right:30px!important;mso-fareast-font-family:'Times New Roman';padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;text-align:left">filler text for event information. filler text for event information. filler text for event information. filler text for event information. filler text for event information.</p>
</th>

实际渲染代码 #

<td valign="top" style="padding:0in 0in 0in 0in">
<h2 align="center" style="margin-top:13.5pt;text-align:center;mso-line-height-alt:18.75pt">
<span style="font-size:19.0pt">Event Header<o:p></o:p></span></h2>
<p class="p2" style="mso-margin-top-alt:0in;margin-right:0in;margin-bottom:7.5pt;margin-left:.25in;margin-right:30px!important">
<span style="color:#0A0A0A">filler text for event information. filler text for event information. filler text for event information. filler text for event information. filler text for event information.<o:p></o:p></span></p>
</td>

可行排查方向与解决建议 #

排查方向 #

1. 校验Foundation for Emails编译规则：确认框架版本是否存在行内样式剥离bug，重点检查带空格的字体族名（如Century Gothic）编译时是否被误删，可先去掉字体名两侧的单引号测试编译结果。
2. 确认客户端字体继承逻辑：父级th标签默认字体为EB Garamond，部分邮件客户端会优先继承父级单元格样式，忽略子标签h2的行内样式配置。
3. 排查Outlook专有标签干扰：渲染代码中出现的<o:p>为Outlook自动插入的Office专有标签，会强制覆盖包裹文本的字体样式。

解决建议 #

1. 简化标签嵌套结构：直接将标题文本写在th/td单元格内，所有字体样式全部定义在单元格的行内样式中，避免嵌套的h2、p标签被客户端剥离样式。
2. 添加Outlook专属样式适配：

<!--[if mso]>
<style type="text/css">
h2, span, o\:p {
  font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif !important;
}
</style>
<![endif]-->

3. 调整字体栈配置：去掉字体名两侧的引号，补充多端预装兜底字体，降低解析异常概率。
4. 关闭框架自动样式压缩功能：部分压缩工具会误删带空格的字体族名配置，可针对性跳过font-family属性的压缩校验。

内容的提问来源于stack exchange，提问作者web_dev_arccatc