有没有办法在 HTML 电子邮件中使用 Google Web 字体？答案

【问题标题】：Is there a way to use Google Web Fonts in an HTML email?有没有办法在 HTML 电子邮件中使用 Google Web 字体？
【发布时间】：2013-06-27 07:55:53
【问题描述】：

HTML 电子邮件必须（应该）内联其 CSS，以便在大多数电子邮件客户端中具有预期的设计。

有没有办法将 Google 网络字体链接或嵌入此类电子邮件，但仍能在电子邮件客户端中保持广泛接受（适当呈现）？

我知道另一种方法是使用具有相应排版的图像，但我会首先搜索其他可能有用的东西。

【问题讨论】：

标签： css fonts html-email google-webfonts

【解决方案1】：

如果字体是绝对必要的，您将不得不使用文本作为图像解决方案。截至 12 月，只有 iOS Mail、Mail.app、Lotus Notes 8、Android 上的默认 Mail、Outlook 2000 和 Thunderbird 支持使用外部自定义字体。

见： http://www.campaignmonitor.com/blog/post/3897/using-web-fonts-in-email

2014 年 2 月 10 日编辑：由于这是我最受欢迎的答案之一，因此这里是电子邮件中网络字体最佳实践的更新链接：

http://www.campaignmonitor.com/resources/will-it-work/webfonts/

【讨论】：

【解决方案2】：

您现在可以使用 NPM 包 custom-fonts-in-emails 将自定义字体作为图像嵌入到您的电子邮件中。 https://github.com/crocodilejs/custom-fonts-in-emails

import customFonts from 'custom-fonts-in-emails';
import path from 'path';

const options = {
  text: 'Make something people want',
  fontNameOrPath: 'GoudyBookletter1911',
  fontColor: 'white',
  backgroundColor: '#ff6600',
  fontSize: 40
};

customFonts.png2x(options)
  .then(console.log)
  .catch(console.error);

输出：

<img width="461" height="51" src="data:image/png;base64,..." title="Make something people want" alt="Make something people want" style="color: white;font-size: 25.5px;line-height: 51px;text-align: center;background-color: #ff6600;">

渲染：

【讨论】：