无法在Gmail中的HTML电子邮件中显示Google字体

Question

标题已经解释了问题，但我无法在我创建的HTML电子邮件模板中使Google字体在Gmail中显示。我已经尝试了各种方法（内联CSS、@import、@font-face等），但仍然无法显示。

当前是否有办法让使用HTML电子邮件模板的用户在Gmail中看到Google字体？我知道一定有办法，但我真的卡在这里了，希望得到任何帮助！以下是我的当前代码：

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

<style type="text/css"> h1 { position: relative; font-family: 'Lobster', sans-serif; font-size:330%; } </style>

<h1 style="position: relative; text-align: center; font-family: 'Lobster'; padding: 1%;">Heading</h1>

谢谢！

- michaelvhester

Answer 1

Gmail（就像大多数网络邮件一样）会剥离标题样式，并且没有办法内联自定义字体声明。由于HTML被客户端消耗和改变的方式有很多不同，所以电子邮件比Web具有更多的约束条件。

您需要内联CSS并使用字体堆栈以回退到可接受的系统字体，如果您绝对需要某种外观的字体，则需使用网页上“禁忌”的做法：使用图像，但请确保它们尽可能小。alt文本将确保您的纯文本版本也可读。

- denmch

---

嘿@denmch，我看到了这篇文章，似乎GMail支持标题样式。不知道为什么现在它们不起作用了？https://emails.hteumeuleu.com/troubleshooting-gmails-responsive-design-support-ad124178bf81 - michaelvhester

看起来Gmail在9月份开始推出嵌入式样式的支持，而Litmus一直在这里跟进更新：https://litmus.com/blog/gmail-to-support-responsive-email-design - denmch

我必须支持多种电子邮件客户端，因此我使用最广泛支持的一组有限样式，并使用Campaign Monitor的内联工具（https://inliner.cm/ - 根据我的经验，它比Mailchimp更好用）对所有内容进行内联。总会有某些客户端或Webmail接口会扭曲或忽略您的代码，内联样式是让它们都理解您意图的最佳方法。 - denmch

这很有道理，而且那是一个非常酷的工具。谢谢你向我展示。如果您有时间，最后一个问题 - 我真的想在标题中使用自定义字体，所以我考虑将其设置为图像。但是，我需要部分文本链接到我的网站。我知道PDF支持在图像中嵌入超链接，但它们不受Mail Chimp支持。有没有一种类型的图像可以使用，既被支持，又允许我超链接图像文本的一部分？ - michaelvhester

我从未尝试过使用图像映射，但如果您搜索一下，就可以找到有关在电子邮件中使用图像映射的信息。我认为正常的妥协方式，并且很容易实现的方法是将整个图像包装在超链接中。如果它被设计成某个部分作为明显的行动呼叫或看起来像可点击的东西（例如按钮或链接），那么当人们单击它时，它将起作用。 - denmch