HTML邮件签名中Open Sans字体在Safari及iOS设备上无法渲染求助

邮件客户端对CSS的支持和浏览器差异极大，尤其是Safari和iOS原生邮件，你的问题主要出在外部字体引入方式和样式优先级/继承上，以下是具体解决步骤：

核心问题原因 #

1. @import 引入字体的方式在多数邮件客户端（包括iOS/Safari）中支持性很差，远不如@font-face可靠。
2. 仅在<table>上设置font-family，部分邮件客户端不会将样式继承到内部的<td>等文本元素。
3. 未添加字体降级方案，一旦字体加载失败会直接使用系统默认字体。

具体修改方案 #

1. 替换字体引入方式为@font-face #

直接使用多格式兼容的@font-face代码替代@import，适配Safari/iOS的字体解析规则：

<!doctype html>
<head>
<style>
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format('woff2'),
       url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-mg.woff) format('woff'),
       url(https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-.ttf) format('truetype');
}
</style>
</head>

2. 内联样式到所有文本元素 #

邮件客户端普遍忽略<head>中的全局样式，必须将font-family直接写在每个包含文本的<td>上，同时添加降级字体：

<table style="background-color: #000000; text-align: left; color: #ffffff; font-size: 14px; line-height: 21px; padding: 10px 40px; border-spacing: 0;">
<tbody>
  <!-- 每个文本单元格都要内联字体样式 -->
  <tr>
    <td style="font-family: 'Open Sans', Arial, sans-serif !important; font-weight: 400; font-style: normal;">
      你的签名文本内容
    </td>
  </tr>
</tbody>
</table>

3. 关键注意事项 #

• 务必添加降级字体（如Arial, sans-serif），确保字体加载失败时仍有合适的显示效果。
• 避免依赖<head>中的全局样式，所有影响显示的样式都要内联到元素上，这是邮件开发的标准做法。
• 测试时务必在iOS原生邮件、Safari浏览器中预览，邮件客户端的样式兼容逻辑和浏览器完全不同。

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