iPhone苹果邮件发至Gmail网页端时HTML签名字体被覆盖问题求助

问题现象 #

从iPhone的Apple Mail应用发送邮件到Gmail网页客户端时，HTML邮件签名中文本元素设置的font-family样式会被覆盖，目标字体被移除，文本以默认衬线字体渲染，不符合预期样式。其他使用场景下相同代码显示正常。

原始HTML签名代码片段 #

<table cellspacing="0" cellpadding="0"
        style="font-family: Arial, Helvetica, sans-serif; border: none; padding-top: 24px; padding-right: 18px; padding-bottom: 18px; padding-left: 18px; background-color: white; border-collapse: separate; margin: 0;">
        <tr>
            <td style="width: 204px; max-width: 204px; vertical-align: top; padding-right: 12px;">
                <p style="font-size: 20px; font-style: normal; font-weight: 700; margin: 0 0 5px 0; padding: 0;">
                    My Name
                </p>
                <p style="color: #8F8F8F; font-size: 12px; font-weight: 400; margin: 0 0 35px 0;">
                    CEO
                </p>
            </td>
<!-- 剩余代码省略 -->
</table>

发送后Gmail端检测到的代码结构（问题根源） #

Apple Mail会自动修改HTML结构，注入带有face="UICTFontTextStyleBody"的<font>标签，导致字体被强制替换：

<td style="width:204px;max-width:204px;vertical-align:top;padding-right:12px">
    <p style="font-weight:700;margin:0px 0px 5px;padding:0px">
        <font face="UICTFontTextStyleBody">
            <span style="background-color:rgba(255,255,255,0)">My Name</span>
        </font>
    </p>
    <p style="margin:0px 0px 35px">
        <font face="UICTFontTextStyleBody">
            <span style="background-color:rgba(255,255,255,0)">CEO</span>
        </font>
    </p>
</td>

已尝试但无效的解决方案 #

• 在文本元素上直接内联font-family样式：

<p style="font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-style: normal; font-weight: 700; margin: 0 0 5px 0; padding: 0;">My Name</p>

• 使用包含通用字体族的网页安全字体栈（当前正在使用）
• 尝试覆盖Apple Mail注入的face属性：

<td style="width: 204px; max-width: 204px; vertical-align: top; padding-right: 12px;">
    <p style="font-weight: 700; margin: 0 0 5px; padding: 0;">
        <font face="Arial, Helvetica, sans-serif">
            <span>My Name</span>
        </font>
    </p>
    <p style="margin: 0 0 35px;">
        <font face="Arial, Helvetica, sans-serif">
            <span>CEO</span>
        </font>
    </p>
</td>

• 尝试CSS计数器、SVG文本渲染等特殊技巧（无效果）
• 在内联CSS中添加!important强制优先级：

<table cellspacing="0" cellpadding="0"
        style="font-family: Arial, Helvetica, sans-serif!important; border: none; padding-top: 24px; padding-right: 18px; padding-bottom: 18px; padding-left: 18px; background-color: white; border-collapse: separate; margin: 0;">
        <tr>
            <td style="width: 204px; max-width: 204px; vertical-align: top; padding-right: 12px;">
                <p
                    style="font-family: Arial, Helvetica, sans-serif!important; font-size: 20px; font-style: normal; font-weight: 700; margin: 0 0 5px 0; padding: 0;">
                    My Name
                </p>
                <p
                    style="font-family: Arial, Helvetica, sans-serif!important; color: #8F8F8F; font-size: 12px; font-weight: 400; margin: 0 0 35px 0;">
                    CEO
                </p>
            </td>
<!-- 剩余代码省略 -->
</table>

进一步排查与解决方案建议 #

1. 在最内层span标签强制设置font-family
   Apple Mail注入的<font>标签会被Gmail优先解析，直接在内部的<span>上添加内联样式，同时叠加!important：

<p style="font-weight:700;margin:0px 0px 5px;padding:0px">
    <font face="Arial, Helvetica, sans-serif">
        <span style="font-family: Arial, Helvetica, sans-serif !important;">My Name</span>
    </font>
</p>

2. 简化HTML结构，减少嵌套层级
   去掉可能被Apple Mail修改的<p>标签，直接用<td>或<font>包裹文本，降低客户端篡改代码的概率：

<td style="width:204px;max-width:204px;vertical-align:top;padding-right:12px;font-family:Arial, Helvetica, sans-serif;">
    <span style="font-size:20px;font-weight:700;">My Name</span><br>
    <span style="color:#8F8F8F;font-size:12px;">CEO</span>
</td>

3. 检查Apple Mail的签名设置
   进入iPhone的「设置」-「邮件」-「签名」，确认是否开启了“使用标准字体”或类似强制统一格式的选项，这类设置会覆盖自定义HTML的样式。

4. 尝试使用<font>标签嵌套
   在Apple Mail注入的<font>标签内部再嵌套一层自定义的<font>标签，双重指定字体：

<p style="font-weight:700;margin:0px 0px 5px;padding:0px">
    <font face="Arial, Helvetica, sans-serif">
        <font face="Arial, Helvetica, sans-serif">
            <span>My Name</span>
        </font>
    </font>
</p>

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