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

Posted 2023-03-24

【中文标题】@font-face 是不是适用于电子邮件模板？

【英文标题】：Does @font-face work in email templates?@font-face 是否适用于电子邮件模板？

【发布时间】：2015-04-02 22:15:26

【问题描述】：

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

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

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

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

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

【问题讨论】：

仅在苹果邮件中 - campaignmonitor.com/resources/will-it-work/webfonts

@LuisP.A.浏览该页面后，似乎真的没有任何方法，即使使用@import，这是非常跨浏览器和跨客户端的电子邮件网络字体？

【参考方案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]-->

【参考方案2】：

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

Access-Control-Allow-Origin: *

【参考方案3】：

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