如何解决Windows10浏览器中HTML邮件emoji渲染尺寸过大的问题

解决方案（全部使用HTML邮件高兼容特性） #

方案1：单独包裹emoji控制尺寸（兼容性最优）

Windows 10默认使用Segoe UI Emoji字体渲染emoji，天生比同字号普通文本大10%-20%，给emoji单独加带内联样式的span标签即可精准控制尺寸，修改后代码如下：

<p style="
  margin: 0;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode',
    'Lucida Grande', 'Lucida Sans', Arial, sans-serif, 'Segoe UI Emoji';
  font-weight: 700;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 1px;
  text-align: center;
  color: #4c7b99;
">
  <span style="font-size: 10px; vertical-align: middle;">📦</span> ORDER NO.
</p>

你可以根据实际渲染效果微调span的font-size数值，10px是适配12px普通文本的常用值，vertical-align属性用来修正emoji和文字的对齐偏差。

方案2：无额外标签，优化字体 fallback

如果不想额外增加标签，直接在原有p标签的font-family末尾追加'Segoe UI Emoji'即可，统一Windows 10下的emoji渲染字体，避免不同浏览器 fallback 到不同字体导致的尺寸波动，改造成本最低。

兜底方案：emoji转图片插入

如果以上调整后仍有个别客户端出现尺寸偏差，可以把emoji导出为12x12px的透明PNG图片插入，所有邮件客户端100%兼容，示例代码：

<p style="
  margin: 0;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode',
    'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 1px;
  text-align: center;
  color: #4c7b99;
">
  <img src="本地图片嵌入地址" alt="📦" width="12" height="12" style="vertical-align: middle; border: 0;" /> ORDER NO.
</p>

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