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

Question

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

我已经考虑过以这种方式将它嵌入样式头中:

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

但我担心这会严重影响页面加载.有没有更好的办法？

更新:为了找到通用解决方案,这些不是谷歌字体,或存在于任何类型的在线源库中的字体.

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