Keila项目中MJML邮件模板的字体加载问题解析

背景介绍

在Keila项目中使用MJML构建邮件模板时，开发者可能会遇到一个常见问题：邮件模板自动加载Google Fonts字体资源。这种情况在需要严格遵守GDPR合规要求的场景下尤为敏感，因为加载第三方资源可能涉及用户隐私问题。

问题现象

当开发者使用MJML编写邮件模板并设置自定义字体堆栈时，例如：

<mj-style>
  * {
    font-family: "IBM Plex Sans", Aptos, Roboto, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  }
</mj-style>

生成的HTML中仍然可能包含对Google Fonts的请求：

<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
<style type="text/css">
  @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
</style>

问题根源

经过分析，这个问题并非由Keila项目本身引起，而是源于开发环境中的MJML工具链。具体来说：

1. 开发工具影响：当使用VS Code的MJML扩展预览或生成HTML时，某些扩展可能会默认添加Google Fonts引用
2. 模板继承：如果邮件模板基于某些现成的MJML模板，这些模板可能内置了字体引用
3. MJML默认行为：某些MJML版本或配置可能有默认的字体加载行为

解决方案

1. 明确字体定义

使用MJML的<mj-attributes>和<mj-all>标签在模板头部明确定义所有字体，确保覆盖任何可能的默认设置：

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-all font-family="'IBM Plex Sans', Aptos, Roboto, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif"/>
    </mj-attributes>
  </mj-head>
  <!-- 邮件内容 -->
</mjml>

2. 检查开发工具配置

在VS Code或其他编辑器中：

• 检查MJML扩展的设置
• 禁用任何自动添加资源的选项
• 考虑使用纯MJML CLI工具验证输出

3. 使用本地字体

对于需要严格GDPR合规的场景：

• 将字体文件直接嵌入邮件中（Base64编码）
• 使用系统默认字体堆栈
• 避免任何外部资源引用

最佳实践建议

1. 模板审查：在将MJML模板导入Keila前，先检查生成的HTML内容
2. 环境隔离：在不同环境中验证模板行为（开发、测试、生产）
3. GDPR合规检查：使用工具扫描最终邮件内容，确保没有意外的外部请求
4. 文档记录：为团队建立MJML模板编写规范，明确字体使用规则

总结

Keila项目本身不会自动添加Google Fonts引用，这个问题通常源于开发工具链或模板本身。通过明确控制字体定义和仔细检查开发环境配置，开发者可以轻松创建完全符合GDPR要求的邮件模板。关键在于理解整个工具链的工作流程，并在每个环节进行验证。