邮件格式最佳实践：HTML、纯文本与 MIME 结构

电子邮件的历史比万维网更久远，其格式模型也反映了这段历史。与渲染统一 HTML 规范的浏览器不同，各种邮件客户端——Gmail、Outlook、Apple Mail 及其他数十种——各自实现了 HTML 和 CSS 的不同子集。了解邮件格式的实际工作原理，有助于您发送在各处都能正确送达、渲染和阅读的邮件。

MIME：容器格式

MIME（多用途互联网邮件扩展）定义了邮件消息的结构。简单的纯文本邮件只有一个主体部分。同时包含 HTML 和纯文本的邮件则具有 multipart/alternative 结构，两个版本作为嵌套部分存在。

Content-Type: multipart/alternative; boundary="--boundary"

----boundary
Content-Type: text/plain; charset=utf-8

这是纯文本版本。

----boundary
Content-Type: text/html; charset=utf-8

<html><body><p>这是 HTML 版本。</p></body></html>

multipart/alternative 类型告知客户端显示其偏好的版本——支持 HTML 的客户端渲染 HTML 部分，纯文本客户端显示纯文本部分。

如果邮件包含附件，结构会再增加一层：multipart/mixed 容器包裹内容部分和附件部分。

HTML 邮件

邮件中的 HTML 渲染与网页渲染的区别

现代浏览器支持完善的 CSS 规范，邮件客户端则不然。

• Windows 版 Outlook 使用 Microsoft Word 的渲染引擎处理 HTML，与任何浏览器都有不同的 CSS 支持
• Gmail 在某些情况下会剥离 <head> 和 <style> 标签，要求使用内联 CSS
• Apple Mail 和 iOS Mail 对 CSS 支持较好，但有各自的特殊之处
• 深色模式 在某些客户端上会自动进行颜色反转，除非您明确加以处理

因此，在浏览器中显示正常的 HTML，在邮件客户端中可能会呈现完全不同的效果。

可靠有效的方法

• 使用表格布局：这是在各客户端（包括 Outlook）中唯一能稳定工作的方式。现代邮件模板仍然使用 <table> 结构实现多列布局。
• 内联 CSS：避免依赖 <style> 块，因为某些客户端（尤其是特定渲染模式下的 Gmail）会将其剥离。在元素上使用 style="" 属性。
• 系统字体或网络安全字体：通过 @font-face 加载的自定义网络字体并非处处支持。请回退到 Georgia、Arial 或系统 UI 字体。
• 带有 alt 文本的图片：图片默认情况下经常被屏蔽。Alt 文本是用户在图片加载前看到的内容，也是图片始终无法加载时的备选显示。
• 响应式最大宽度：将内容包裹在带有 max-width: 600px 和 width: 100% 的 <table> 或 <div> 中，实现移动端响应式布局。

应避免的做法

• JavaScript：被邮件客户端完全忽略（也是投递风险信号）
• CSS float：支持不一致，改用表格单元格
• Outlook 中的背景图片：Outlook 的 Word 渲染器不支持 CSS 背景图片
• 容器固定像素宽度：在移动设备上会破坏布局
• 外部样式表：通常被剥离
• position: absolute：支持不可靠

内联 CSS

发送前，通过 CSS 内联工具将以下代码：

<style>
  p { color: #333; font-size: 16px; }
</style>
<p>你好</p>

转换为：

<p style="color: #333; font-size: 16px;">你好</p>

大多数邮件服务提供商和 API（包括 Rovela）会自动完成此操作。

纯文本邮件

每封 HTML 邮件都应包含纯文本替代版本。

纯文本仍然重要的原因

• 某些客户端偏好纯文本：企业邮件网关、部分移动邮件应用以及辅助技术可能会显示纯文本部分
• 垃圾邮件过滤器会查看文本部分：许多垃圾邮件过滤器会检查纯文本版本。仅含 HTML 的邮件显得可疑；不含 HTML 的纯文本邮件评分通常更好。HTML 与纯文本内容不匹配也是垃圾邮件的信号。
• 特定用户的可读性：使用屏幕阅读器的视觉障碍用户可能会发现结构良好的纯文本更易于阅读
• 调试：当 HTML 发送出现问题时，纯文本版本可以帮助了解内容的预期呈现方式

撰写优质纯文本

纯文本应该是邮件的完整内容，而不是"请在浏览器中查看此邮件"之类的提示语。为可读性排版：用换行符分隔段落，完整拼写出 URL，用简单的 ASCII 符号表达结构。

主题：您的订单 #1042 已发货

您好，

您的订单已通过顺丰发出，预计送达时间：10 月 28 日（周二）。

查询物流：
https://www.sf-express.com/track?no=123456789

本次订单商品：
- 蓝色机械键盘（x1）
- USB-C 数据线，2m（x2）

如有疑问，请回复此邮件或访问 rovela.dev/support。

谢谢，
Rovela 团队

字符编码

始终在 Content-Type 头部中指定 charset=utf-8。UTF-8 可编码所有 Unicode 字符，这在邮件中包含带重音字母、表情符号或非拉丁文字时至关重要。

没有字符集声明时，某些客户端会默认使用 ASCII 或 Latin-1，导致该范围以外的任何字符显示乱码。

主题行与预览文本

主题行

主题行是收件人看到的第一条格式化内容。请注意：

• 控制在 60 个字符以内（超出部分在移动端可能被截断）
• 具体且与邮件内容相关
• 避免全大写和过多标点符号

预览文本

预览文本是收件箱列表中主题行后显示的简短文本预览。如果不明确设置，客户端会使用邮件正文中找到的第一段文字——通常是"在浏览器中查看此邮件"或公司 logo 的 alt 文本。

请主动设置预览文本：

<span style="display:none;max-height:0;overflow:hidden;">
  您的订单 #1042 已发货，预计 10 月 28 日周二送达。
</span>

display:none 使其在渲染后的邮件中不可见，同时保持其对收件箱预览可见。

通过 Rovela API 发送

通过 Rovela 发送时，同时传入 html 和 text 正文字段：

{
  "from": "orders@yourstore.com",
  "to": ["customer@example.com"],
  "subject": "您的订单已发货",
  "html": "<p>您的订单 <strong>#1042</strong> 已发货...</p>",
  "text": "您的订单 #1042 已发货..."
}

Rovela 自动构建正确的 MIME 结构，内联 HTML 部分中的 CSS，并处理编码。如果只传入 html 而省略 text，Rovela 会从 HTML 生成纯文本版本；当您希望控制纯文本的可读性时，显式提供的版本效果更好。