Merienda One字体在网站、桌面与移动端Gmail显示不一致如何解决

差异产生的核心原因 #

你遇到的字体显示差异本质是Gmail的邮件渲染机制限制：Gmail（包含桌面端、移动端App）会默认过滤所有外部资源导入语句，你代码里用@import引入的Google Fonts链接会被直接删除。渲染对应元素时，找不到未预装在系统里的Merienda One字体，就会自动降级到当前设备默认的cursive类字体，不同设备的兜底字体差异很大，就出现了不一致的显示效果。

可用解决方案 #

• 方案1：内嵌Base64格式字体
  将Merienda One的字体文件转成Base64编码，直接写在邮件<style>标签的@font-face规则里，避免调用外部资源，绝大多数版本的Gmail都支持识别内嵌的Base64字体。建议额外把font-family声明内联到对应元素的style属性中，降低被样式过滤的概率。
• 方案2：特殊文本转图片（兼容性最优）
  如果需要100%还原字体效果，不受任何邮件客户端规则限制，可以直接把需要用Merienda One显示的标题内容导出为透明背景的PNG图片，用<img>标签插入到邮件对应位置，同时设置合理的alt文本保证无障碍访问。这个方案在所有邮件客户端的显示效果完全一致，不会出现渲染偏差。

邮件开发通用注意事项 #

不要在邮件代码中使用@import引入外部样式、字体资源，绝大多数邮件客户端出于安全和隐私考虑，都会拦截这类外部请求，所有样式和资源尽量做内嵌处理。

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