为什么我的HTML邮件签名文本颜色在浏览器中无法正常显示？

问题原因 #

• 样式属性书写错误：代码中所有粗体效果都用了font-style: bold定义，font-style仅用于控制字体倾斜，粗体对应的正确属性为font-weight: bold，Windows版Outlook使用Word内核渲染邮件，对错误属性的容错性极低，会导致后续样式失效。
• 标签使用不符合邮件场景规范：你用来展示彩色文本的<a>标签没有设置href跳转属性，Outlook会直接忽略无跳转链接的自定义样式；如果这部分内容不需要点击跳转，直接替换为<span>标签即可，也能避免Outlook自动给链接加下划线、默认蓝色的问题。
• 颜色值兼容性不足：职位字段使用了英文颜色名gray，部分版本Outlook不支持颜色名取值，需要统一替换为6位十六进制颜色码。
• 语法不规范：底部保密声明区块将small作为div的自定义属性使用，不符合HTML语法规范，会导致Outlook解析样式异常。

修复后代码（最小改动版本） #

<div style="display:inline-block;vertical-align:top;">
    <!-- 此处可放置企业logo图片 -->
</div>
<div style="display:inline-block; padding-left: 10px;">
    <div style="font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight: bold;">姓名</div>
    <div style="font-family:Helvetica, Arial, sans-serif; font-size:11px; font-weight:bold; color:#808080;">商务开发总监</div>
    <div style="font-family:Helvetica, Arial, sans-serif; font-size:10px; font-weight:bold;"> 办公电话: xxxxxxxxxx</div>
    <div style="font-family:Helvetica, Arial, sans-serif; font-size:10px; font-weight:bold;">手机: xxxxxxxxxx</div>
    <div style="font-family:Helvetica, Arial, sans-serif; font-size:10px; font-weight:bold;">邮箱:<a href="mailto:xxxxxxxxxx" style="color:#000000; text-decoration:none;"> xxxxxxxxxx</a></div>
    <div style="font-family:Helvetica, Arial, sans-serif; font-size:10px; font-weight:bold;">
        <span style="color:#24bef2;">xx</span> 
        <span style="color:#e9212c;">x</span>
        <span style="color:#f16530;">x</span>
        <span style="color:#804295;">x</span>
        <span style="color:#1a9248;">x</span>
        <span style="color:#aecf4c;">x</span>
        | <span style="color:#f06a4f;">xx</span> 
        <span style="color:#00a3aa;">xxxxx</span> 
        | xxxxxxxxxxx
    </div>
</div>

<small style="font-family:Helvetica, Arial, sans-serif; font-size:8px; color:#4d4d4e; padding-top: 10px; display:block;">
    保密声明：本电子邮件及所有附件仅供指定收件人使用，可能包含保密及特权信息。任何未经授权的查阅、使用、披露或分发本信息的行为均被禁止，且可能承担法律责任。如果您误收本邮件，请通过回复邮件通知发件人并销毁原始信息的所有副本。打印本邮件前请考虑环保需求。
</small>

<br>
<br>

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