我是以编程方式发送HTML格式的电子邮件,并将字体设置为Arial(font-family: Arial;).当邮件到达Outlook 2010时,table元素中的文本位于Times New Roman中.div元素中的文字在Arial中很好.如果我View Source,复制到HTML文件,并在浏览器中查看,所有字体按预期运行(它都是Arial).
一些谷歌搜索结果显示,当没有指定时,Outlook将回归到默认字体(Times New Roman),但这不是这里发生的事情.
为什么Outlook强制我的电子邮件在Times New Roman中以其他方式显示？
我尝试了几件事,包括包裹css.有关如何获取HTML电子邮件Outlook 2010使用webfont而不是默认为预安装字体的任何想法？
以下是我尝试过的一些内容:
<style type="text/css">
@font-face {
font-family: 'thegirlnextdoor';
src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot'); /* IE9 Compat Modes */
src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.woff') format('woff'), /* Modern Browsers */
url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.ttf') format('truetype'), /* Safari, Android, iOS */
url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.svg') format('svg'); /* Legacy iOS */
}
</style>
在HTML电子邮件中使用Google Webfonts我在Outlook(2007,2010等)中遇到了在合并webfonts之前没有出现的字体替换问题.它忽略了字体堆栈并直接进入Times.
尽管使用内联回退字体堆栈,但仍会发生这种情况.
我已经注意到之前发布的类似问题,但仅作为一般性问题,与webfonts的使用无关.以前所有的字体回退都可以正常工作.我正在使用Litmus进行电子邮件测试.
有谁知道为什么会发生这种情况？
链接到Litmus:https://litmus.com/pub/53a33c7/screenshots
最初在CSS中链接的字体如下:
<link href='http://fonts.googleapis.com/css?family=Arvo|Droid+Serif:400,700,400italic,700italic|Roboto:300' rel='stylesheet' type='text/css'>
在另一个答案中看到可能的解决方案后,我也尝试使用@ font-face和自托管文件,但它不起作用(我也更新了类名):
除了font-face尝试的解决方法:
<!--[if !mso]><!-->
@font-face {
font-family: 'droid_serif';
src: url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot');
src: url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.svg#droid_serif') format('svg'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.woff') format('woff'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
<!--<![endif]-->
Outlook特定的覆盖CSS似乎有效,但存在优先级问题.我不相信Outlook认可!重要声明所以我一直在努力寻找更具体的选择.但是,我仍然不明白为什么会发生这种情况,如果有更简单的解决办法.
Outlook字体覆盖摘录:
<!--[if gte mso 9]>
<style>
/* Target Outlook 2007 and 2010 */
h1 { font-family: 'Georgia',serif !important; font-weight:normal; }
h1 a { font-family: 'Georgia',serif !important; font-weight:normal; }
h2 { font-family: 'Trebuchet MS',arial, helvetica, sans-serif; font-weight:normal; …据我所知,为了在电子邮件中显示特定于Outlook的HTML,我可以实现以下代码:
<!--[if (gte mso 9)|(IE)]>
Welcome to the newsletter.
<![endif]-->
但是,我如何实现if/else逻辑.例如,在不使用CSS类的情况下,我需要在Outlook中显示一部分内容,在其他客户端中显示完全不同的内容部分.
这可能吗？
(CSS类已被证明是不可靠的,因此我对条件HTML的要求相反).