Css @font-face在电子邮件模板中有效吗?
是否有一种方法可以使用CSS的Css @font-face在电子邮件模板中有效吗?,css,email,font-face,html-email,mailchimp,Css,Email,Font Face,Html Email,Mailchimp,是否有一种方法可以使用CSS的@font-face在电子邮件模板中嵌入自定义web字体。这个问题与MailChimp中的电子邮件模板特别相关,但我也想知道是否有一个跨浏览器的解决方案可用于所有或大多数电子邮件订阅服务 我考虑过以这种方式将其嵌入样式标题中: @font-face { src: url("http://www.remoteserver.com/fonts/font.otf"); font-family: Font; } 但我担心这会严重影响页面加载。有更好的办法吗 更
@font-face
在电子邮件模板中嵌入自定义web字体。这个问题与MailChimp中的电子邮件模板特别相关,但我也想知道是否有一个跨浏览器的解决方案可用于所有或大多数电子邮件订阅服务
我考虑过以这种方式将其嵌入样式标题中:
@font-face {
src: url("http://www.remoteserver.com/fonts/font.otf");
font-family: Font;
}
但我担心这会严重影响页面加载。有更好的办法吗
更新:为了找到一个通用的解决方案,这些不是谷歌字体,也不是存在于任何种类的在线源库中的字体 你可以!但由于html电子邮件中的所有内容都很酷,因此它不会在每个客户端/浏览器中都起作用
@font-face
将在iOS和(大多数)Android默认客户端、Apple Mail和Outlook 2011 for Mac上运行。其他任何东西要么剥去整个
标记,要么忽略它
一些注意事项:字体会使Outlook'07-'13崩溃,所以请将您的字体CSS包装在MSO条件中自己的样式标记中。确保在@font-face
-otf、ttf、eot、svg中使用所有类型的字体文件,以便在浏览器中工作。然后确保你在尝试使用它时有很好的回退。至少你应该有字体系列:'customfont',无衬线代码>(或衬线)
@字体{
字体系列:“自定义字体”;
字体大小:400;
字体风格:普通;
src:url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.svg#Customfont-常规格式('svg'),
url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.eot?#iefix“)格式('embedded-opentype'),
url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.woff“)格式(“woff”),
url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.ttf格式('truetype');
}
一个难题是跨来源资源共享(CORS)。至少对于Thunderbird,您必须确保远程服务器(承载字体)发送HTTP头,如:
访问控制允许原点:*
我最近尝试将自定义字体添加到电子邮件模板中,但这些字体没有在gmail和outlook中呈现,因此这些电子邮件客户端限制了自定义字体的下载。
在这种情况下,您必须编写一些所有浏览器都支持的备用字体。
只能在apple mail-@LuisP.A中使用此链接。在浏览了该页面之后,似乎真的没有任何一种方法,即使是使用@import
,对于电子邮件中的web字体来说,这种方法是非常跨浏览器和跨客户端的?
<!--[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]-->