使用Google Webfonts时,Outlook中的CSS字体堆栈替换问题

Question

在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; }
            h3 { font-family: 'Trebuchet MS',arial, helvetica, sans-serif; }
            .cover,img.cover,a.cover {
                display: block;
                visibility: visible;

                td { font-family: 'Trebuchet MS',arial, helvetica, sans-serif; } 

                .droid { font-family: 'Georgia', serif; }
}
    </style>
    <![endif]-->

有问题的代码示例:

<td height="30" colspan="3" align="left" valign="middle" class="featured">
    <h2 style="text-align: left; padding: 0; margin: 0; color: #00799f; font-family: 'Roboto',arial, helvetica, sans-serif; font-size: 21px; font-weight: 100; background: none; border-bottom: 1px solid #b1d6e2; text-decoration: none; line-height: 36px; mso-line-height-rule: exactly;">cover story</h2>
</td>

更新:

我已经尝试了答案中的建议,将webfont导入代码放在排除Outlook的条件标签内无济于事.

<!--[if !mso]><!-- -->
@import url(http://www.example.css);
<!--<![endif]-->

和

<!--[if !mso]><!-- -->
@import url(http://fonts.googleapis.com/css?family=Oxygen);
<!--<![endif]-->

更新II(解决方案):

有了所提供的所有帮助,很明显一些看似微不足道的问题都可能导致这个问题.font-face方法似乎比@import更可取.使webfont名称与本地字体不同可能会导致相同的问题,但这不是这个特定电子邮件发生的事情.

我早就尝试过条件代码来完全隐藏来自Outlook的webfont导入代码<!--[if !mso]><!-->.

问题是我在头部的CSS样式标签中做了这个.只需将此代码放在自己的样式标记中,如下所示就可以了.

我确认它正在工作,因为我能够删除用于检测Outlook 2007及更高版本的CSS代码的额外解决方法,以将h1,h2值恢复为标准字体堆栈.

<!--[if !mso]><!-->
<style type="text/css">
@font-face {
    font-family: 'oxygenlight';
    src: url('http://www----/fonts/oxygen-light-webfont.eot');
    src: url('http://www.----/fonts/oxygen-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.-----/fonts/oxygen-light-webfont.woff') format('woff'),
         url('http://www.-----/fonts/oxygen-light-webfont.ttf') format('truetype'),
         url('http://www.-----/fonts/oxygen-light-webfont.svg#oxygenlightlight') format('svg');
    font-weight: normal;
    font-style: normal;
}
</style>
<!--<![endif]-->

Answer 1

更新:这是一种 调用webfonts 的技术,它可以回退到所有版本的Outlook中的字体堆栈

如果不是Outlook,请尝试声明您的webfont.webfont可能对Outlook有问题,因此根本不调用它可能有效.值得一试...

编辑:

当您的第一个声明的字体在引号中时Outlook崩溃之前出现此问题.这看起来像一个Outlook bug /限制,不幸的是不可避免.