css - @font-face 在电子邮件模板中有效吗？

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