Question

有没有办法可以在电子邮件模板中使用CSS @font-face嵌入自定义网络字体。这个问题与MailChimp中的电子邮件模板有关，但我也想知道是否有适用于所有或大多数电子邮件订阅服务的跨浏览器解决方案？

我考虑过以这种方式将其嵌入样式标题中：

@font-face {
   src: url("http://www.remoteserver.com/fonts/font.otf");
   font-family: Font;
}

但我担心这会严重影响页面加载。还有更好的方法吗？

更新：为了找到通用解决方案，这些不是Google字体，也不是任何在线源库中存在的字体。

Answer 1

你可以！但是，如果html-email中的所有内容都很酷，它将不适用于每个客户端/浏览器。

@font-face适用于iOS和（大多数）Android的默认客户端Apple Mail和Outlook 2011 for Mac。其他所有内容要么删除整个<style>标记，要么忽略它。

一些预防措施：font-face吓坏了Outlook '07 -'13，所以在MSO条件中将你的font-face CSS包装在它自己的样式标签中。确保在@font-face - otf，ttf，eot，svg中使用所有类型的字体文件，以便它可以在浏览器中使用。然后确保在尝试使用它时有良好的后备。至少你应该有font-family:'Custom Font',sans-serif;（或衬线）。

<!--[if !mso]><!-->
<style type="text/css">
    @font-face {
    font-family: 'Custom-Font';
    font-weight: 400;
    font-style: normal;
    src: url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.svg#Customfont-Regular') format('svg'),
         url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.eot?#iefix') format('embedded-opentype'),
         url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.woff') format('woff'), 
         url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.ttf')  format('truetype');
    }
</style>
<!--<![endif]-->

Answer 2

一个问题是跨域资源共享（CORS）。至少对于Thunderbird，您必须确保远程服务器（托管字体）发送HTTP标头，如：

Access-Control-Allow-Origin: *

Answer 3

我最近尝试将自定义字体添加到电子邮件模板，但这些字体未在 gmail 和 Outlook 中呈现，因此发生的情况是这些电子邮件客户端限制了自定义字体的下载。在这种情况下，您必须编写一些所有浏览器都支持的后备字体。可以借助此链接 css fallback fonts

@ font-face是否适用于电子邮件模板？

3 个答案: