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

Question

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

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

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

但我担心这会极大地影响页面加载。有没有更好的方法？

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

Answer 1

可以！但是 html-email 中的所有东西都很酷，它不会在每个 client/browser.

中工作

@font-face 将在 iOS 和（大部分）Android 的默认客户端、Apple Mail 和 Mac 的 Outlook 2011 中工作。其他一切要么剥离你的整个 <style> 标签，要么忽略它。

一些预防措施：字体会影响 Outlook '07-'13，因此请将您的字体 CSS 包裹在它自己的样式标签中，在 MSO 条件中。确保在 @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

一个问题是 Cross-origin 资源共享 (CORS)。至少对于 Thunderbird，您必须确保远程服务器（托管字体）发送一个 HTTP header，例如：

Access-Control-Allow-Origin: *

Answer 3

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

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

Does @font-face work in email templates?

css

email

html-email

font-face

mailchimp