如何在自定义电子邮件通讯中添加字体系列？

Question

我正在尝试制作自定义电子邮件通讯，但是在 gmail 中我无法呈现我想要的字体 render.So 请告诉我应该使用哪个代码片段。

Answer 1

您可以在电子邮件中使用任何网络字体。只是厌倦了他们 aren't supported very well.

话虽这么说 - 有些客户确实支持他们！

要从网络字体提供商导入字体，您可以像任何其他网站一样将其添加到 <style> 标签之间。

示例（使用 google 字体 Open sans）：

<style>
...
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600');
...
</style>

然后当您在电子邮件中使用它时：

<td valign="top" align="center" style="font-family: Open sans, Arial, Helvetica, sans-serif; font-size...">
   <span class="fallback_font">Your content here</span>
</td>

现在您可能已经注意到 class fallback_font 的内容周围有一个跨度。这是针对所有令人讨厌的前景（不是 2002/3）which don't support web fonts。他们要求您为他们添加一个特殊的 class 以拥有他们自己的后备。所以再次在头部放置这段代码：

<!--[if mso]>
     <style type=”text/css”>
        .fallback_font {font-family: Arial, sans-serif;}
     </style>
<![endif]-->

这将创建一个有条件的 CSS 规则，只有 Microsoft Outlook 会遵循该规则。这将强制所有 outlooks 回退到 Arial and/or sans-serif 字体。您需要将其放置在使用 webfont 的每个实例中。

希望这对您有所帮助 - 如有任何问题，请随时提出:)

如何在自定义电子邮件通讯中添加字体系列？

how to add the font family in custom email newsletter?

html

newsletter