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

问题描述

我正在尝试制作自定义电子邮件简报，但是在 gmail 中我无法呈现我想要呈现的字体.所以请让我知道我应该使用哪个代码片段.

I am trying to make a custom email newsletter however in gmail I am not able to render the fonts that I want to render.So kindly let me know which code snippet shall I use for the same.

推荐答案

您可以在电子邮件中使用任何网络字体.只是担心它们没有得到很好的支持.

You can use any web fonts in email. Just be weary that they aren't supported very well.

话虽如此 - 有些客户确实支持他们！

That being said - some clients do support them!

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

To import fonts from a web font provider, you would add it in between your <style> tags like any other site.

示例(使用谷歌字体Open sans):

Example (using google fonts Open sans):

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

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

And then when you use it in your email:

<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>

现在您可能已经注意到，在内容周围有一个 fallback_font 类.这适用于所有讨厌的前景(不是 2002/3)支持网页字体.他们要求你为他们添加一个特殊的类来拥有他们自己的后备.所以再次在头部放置这段代码:

Now you may have noticed there is a span surrounding the content with the class fallback_font. This is for all the pesky outlooks (not 2002/3) which don't support web fonts. They require you to add a special class for them to have their own fallback.So again in the head place this block of code:

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

这会创建一个有条件的 CSS 规则，只有 microsoft Outlooks 才会遵循该规则.这将强制所有前景回退到 Arial 和/或 sans-serif 字体.您需要在使用 webfont 的每个实例中放置它.

This creates a conditional CSS rule which only microsoft outlooks will follow. This will force all outlooks to fallback to an Arial and/or sans-serif font. You will need to place this aroud EVERY instance where a webfont is used.

希望这会有所帮助 - 任何问题都可以问:)

Hope this helps - any question feel free to ask :)

这篇关于如何在自定义电子邮件通讯中添加字体系列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！