HTML邮件适配：解决Open Sans字体加载及移动端响应问题

针对你遇到的Open Sans字体加载异常、移动端/Gmail显示错乱的问题，需要从字体兼容和响应式布局两部分修改代码：

一、确保Open Sans在无预装设备正常加载 #

• 在邮件<head>里添加Google Fonts的@import声明，同时必须搭配系统字体兜底，避免字体加载失败时显示异常：

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');
    body, p, h1, h2, h3 {
      font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    }
  </style>
  

• 对不支持@import的客户端（比如部分Outlook版本），给每个文本元素添加行内样式指定字体，比如：

  <h1 style="font-family: 'Open Sans', Arial, Helvetica, sans-serif;">邮件标题</h1>
  

• 别直接用@font-face嵌入字体文件，绝大多数邮件客户端会拦截外部字体文件，优先用Google Fonts的@import方案。

二、修复移动端/Gmail响应显示问题 #

• 用表格布局替代div：邮件客户端对div兼容性极差，必须用嵌套表格实现响应式。外层表格设为100%宽度，内部内容表格设固定最大宽度适配桌面：

  <table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td>
        <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" style="max-width: 600px;">
          <tr>
            <td>邮件核心内容</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  

• 添加适配移动端的媒体查询：Gmail等移动端客户端支持媒体查询，但必须用class选择器（不能直接用标签选择器），且样式要加!important强制生效：

  <style>
    @media only screen and (max-width: 600px) {
      table.responsive-table {
        width: 100% !important;
      }
      td.responsive-td {
        padding: 10px !important;
        font-size: 14px !important;
      }
      img.responsive-img {
        width: 100% !important;
        height: auto !important;
      }
    }
  </style>
  

  记得给对应的表格、单元格、图片加上responsive-table、responsive-td、responsive-img这些class。
• 行内样式兜底：对不支持媒体查询的客户端，直接在元素上写行内样式，比如图片设置style="width: 600px; max-width: 100%; height: auto;"，保证小屏幕下能自适应。
• 避开浮动和定位：邮件客户端对CSS浮动、绝对定位支持差，全部用表格的align属性（align="left"/"center"/"right"）实现对齐布局。
• 适配Gmail的特殊规则：Gmail会过滤<head>里的部分样式，所以字体、颜色这类关键样式要同时在行内声明；另外Gmail只认带!important的媒体查询样式，别漏掉。

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