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

Question

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

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

我认为this one is the most elaborate article我见过的:

所以我将其添加到 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>

我在email-templates documentation中看到过您可以使用 custom-fonts-in-emails 字体的图像渲染，但这似乎有点过分了......

关于如何继续涵盖大多数情况有什么建议吗？

Answer 1

Google 字体不适用于 Gmail 或 Outlook

网络字体并不适用于所有电子邮件客户端。它们不能与 Gmail、Yahoo、Android 客户端配合使用，并且对 Outlook 2007-2016 的支持不稳定。我知道这听起来很荒谬，因为 Google 有 Google Fonts，但目前的现实是 Gmail 不支持 Google Fonts。

您需要选择一种后备字体，该字体不是 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> 的下方 block :

<!--[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 应该使用您的样式表，但如果不这样做，通常会强制它工作。

祝你好运。