如何在外部HTML（如MJML邮件模板）中嵌入next/font并获取资源路径？

1. 获取自动生成的font-family名称 #

当你通过next/font配置Roboto时，会得到一个包含字体信息的对象，其中就有Next.js自动生成的唯一font-family名称：

import { Roboto } from 'next/font/google';

const roboto = Roboto({
  subsets: ['latin'],
  weight: ['400', '700'],
});

// 打印生成的font-family名称
console.log(roboto.style.fontFamily);

运行项目后，控制台会输出类似"Roboto-[哈希值], sans-serif"的字符串，这就是你需要在MJML中使用的font-family值。

2. 获取包含@font-face规则的CSS文件URL #

next/font会自动生成包含字体@font-face声明的CSS文件，你可以通过两种方式获取它的URL：

• 开发模式：打开浏览器开发者工具的「网络」面板，过滤CSS类型请求，找到带有字体相关哈希的CSS文件，复制其完整URL（格式通常为/_next/static/css/[哈希值].css）。
• 生产构建后：查看项目.next/static/css目录下的文件，找到包含Roboto字体规则的CSS文件，其文件名带有唯一哈希，部署后可通过/_next/static/css/[文件名].css访问（如果使用CDN，需加上CDN前缀）。

3. 在MJML模板中配置字体 #

将获取到的CSS文件和font-family名称应用到MJML模板：

<mjml>
  <mj-head>
    <!-- 引入字体CSS文件 -->
    <mj-style>
      @import url('https://你的域名/_next/static/css/[哈希值].css');
    </mj-style>
  </mj-head>
  <mj-body>
    <!-- 使用Roboto字体 -->
    <mj-text font-family="Roboto-[哈希值], sans-serif">
      这是使用自定义Roboto字体的邮件文本
    </mj-text>
  </mj-body>
</mjml>

注意事项 #

• 邮件客户端对自定义字体支持差异较大，务必添加通用fallback字体（如sans-serif），避免字体加载失败时显示异常。
• 生产环境中CSS文件的哈希值会随构建变化，建议通过构建脚本自动提取该路径，动态注入到MJML模板中，避免手动维护哈希值。

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