在 HTML 电子邮件中使用 Google Webfonts 我在 Outlook(2007、2010 等)中遇到了在合并 webfonts 之前没有发生的字体替换问题。它忽略了字体堆栈并直接转到 Times。

尽管使用内联后备字体堆栈，仍会发生这种情况。

我注意到之前在这里发布过类似的问题，但只是作为一般性问题，与网络字体的使用无关。以前所有的字体后备都可以正常工作。我正在使用 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'>

在看到可能的 solution in another answer 后，我还尝试使用 @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 会识别 !important 声明，所以我一直在努力寻找更具体的选择。但是，我仍然不明白为什么会发生这种情况，以及是否有更简单的修复方法。

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]-->

更新二(解决方案):

在提供的所有帮助下，很明显许多看似微不足道的问题都可能导致此问题。 font-face 方法似乎比@import 更可取。网络字体名称与本地字体名称不同可能会导致同样的问题，但这并不是这封特定电子邮件所发生的事情。

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

问题是我在 head 部分的 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]-->

最佳答案

UPDATE: Here is a technique to call webfonts with fallback to the font stack in all versions of Outlook that break

如果不是 Outlook，请尝试声明您的网络字体。 webfont 可能对 Outlook 有问题，因此根本不调用它可能会起作用。值得一试...

编辑:

这个问题有occured before当您的第一个声明字体在引号中时，Outlook 会中断。不幸的是，这似乎是一个不可避免的 Outlook 错误/限制。

关于html - 使用 Google Webfonts 时 Outlook 中的 CSS 字体堆栈替换问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18423338/