@ font-face是否在电子邮件模板中工作？ [英] Does @font-face work in email templates?

问题描述

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

Is there a way that I can embed custom web fonts using CSS's @font-face in email templates. This question is specifically related to email templates in MailChimp, but I would also like to know if there is a cross-browser solution that works on all or most email subscription services?

我已经考虑将它嵌入到样式标题中：

I have considered embedding it in the style header this way:

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

但我恐怕这会极大地影响页面加载。有更好的方法吗？

But I am afraid this would drastically effect page load. Is there a better way?

更新：为了找到一个通用的解决方案，这些不是Google的字体，或是任何在线源码中存在的字体图书馆

推荐答案

你可以！但是，html-email中的所有东西都很酷，所以每个客户端/浏览器都不行。

You can! But with all things cool in html-email it will not work in every client/browser.

@ font-face 将适用于iOS和（大部分）Android的默认客户端，Apple Mail和Outlook 2011 for Mac。一切都会剥离整个< style> 标签，或者只是忽略它。

@font-face will work in iOS and (most of) Android's default clients, Apple Mail, and Outlook 2011 for Mac. Everything else either strips your whole <style> tag or just ignores it.

一些注意事项：font-face怪异的Outlook '07 -'13，所以将你的font-face CSS包含在自己的样式标签中，以MSO条件。确保您在 @ font-face - otf，ttf，eot，svg中使用所有类型的字体文件，因此它可以在浏览器之间工作。然后，当您尝试使用它时，请确保您有良好的后备。至少应该有 font-family：'Custom Font'，sans-serif; （或serif）。

Some precautions: font-face freaks out Outlook '07-'13, so wrap your font-face CSS in it's own style tag, in an MSO conditional. Make sure you use all types of font files in your @font-face- otf, ttf, eot, svg so it works across browsers. Then make sure you have good fallbacks when you try and use it. At the least you should have font-family:'Custom Font',sans-serif; (or 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]-->

这篇关于@ font-face是否在电子邮件模板中工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！