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

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

我考虑过这样将它嵌入样式头中：

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

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

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

5921

2018-02-03 16:13

起源

只在苹果邮件中 - campaignmonitor.com/resources/will-it-work/webfonts - Luís P. A.

@ LuisP.A。浏览该页面后，似乎确实没有任何方法，即使是 @import，这是电子邮件中的Web字体的跨浏览器和跨客户端？ - JLF

答案:

您可以！但是在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]-->

2018-02-04 20:24

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

Access-Control-Allow-Origin: *

2017-09-27 12:11

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

答案:

热门问题