分类导航

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了css – @ font-face是否适用于电子邮件模板？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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

但是我恐怕这会极大地影响页面加载.有没有更好的办法？

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

解决方法

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

@ font-face将适用于iOS和(大部分)Android的默认客户端,Apple Mail和Outlook 2011 for Mac.一切都会剥离你的整个< style>标记或只是忽略它.

一些注意事项：font-face怪异的Outlook ’07 -’13,所以将你的font-face 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]-->