在带有用于 NodeJS 的电子邮件模板的邮件中使用 Google 字体

Question

我使用 NodeJS 和 nodemailer、电子邮件模板和 ejs 向我的婚礼客人发送邀请。

我已经解决了大多数问题，但我似乎无法管理自定义字体，而且网上有很多关于它的信息......

我认为这是我见过的最详尽的文章：

所以我在 head 标签中添加了这个：

<link href='https://fonts.googleapis.com/css?family=Tillana' rel='stylesheet' type='text/css'>

但这仍然没有在 gmail 中以正确的字体显示，也没有在 Outlook 中显示（尚未测试 yahoo 和其他）...

<td align="center" valign="top" style="padding: 0; font-family: Tillana, Open Sans, Helvetica, Arial, sans-serif; color: #999999;">
    <p style="font-size: 14px; line-height: 20px;">
        Some text hopefully in Tillana
    </p>
</td>

我在电子邮件模板文档中看到，您可以使用带有custom-fonts-in-emails的字体图像渲染，但这似乎有点矫枉过正......

关于如何处理大多数情况的任何建议？

Answer 1

Google 字体不适用于 Gmail 或 Outlook

Webfonts 不适用于所有电子邮件客户端。它们不适用于 Gmail、Yahoo、Android 客户端以及对 Outlook 2007-2016 的不稳定支持。我知道这听起来很荒谬，因为谷歌有谷歌字体，但目前的现实是 Gmail 不支持谷歌字体。

您需要选择一种不是 Tillana 或 Open Sans 的后备字体，它也是一种 Google 字体。在您的情况下，Gmail 的备用字体将为 Arial。

Gmail 支持的字体

• https://jsfiddle.net/wallyglenn/g35nchmL/

这些链接将使您更好地了解网络字体以及如何在电子邮件中使用它们。

• https://www.campaignmonitor.com/resources/guides/web-fonts-in-email/
• https://www.campaignmonitor.com/css/text-fonts/font-face/
• https://www.cssfontstack.com
• https://litmus.com/blog/the-ultimate-guide-to-web-fonts

Outlook 自定义字体

Microsoft Outlook 令人沮丧。Outlook 2007-2016 有时会与 Google 字体一起使用。它也有网络安全字体的问题。如果字体名称中有空格，它将恢复为默认字体 Times-New Roman，这令人沮丧，因为该字体的名称中有空格！

要确保 Outlook 不会默认为 Times，请在<style></style>块下方添加以下内容：

<!--[if (gte mso 9)|(IE)]><style type="text/css">
body, table, td, a, p {font-family: Arial, sans-serif !important; font-size: 12px; font-weight: 300;}
</style><![endif]-->

根据需要将更多 html 元素添加到正文、表格、td 等列表中。您可以像使用任何其他样式表一样进行自定义。Outlook 应该使用您的样式表，但如果没有，这通常会强制它工作。

祝你好运。