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

在一封HTML电子邮件中使用Google Webfonts时，我在Outlook（20072010等）中遇到了在合并Webfonts之前没有出现的字体替换问题。它会忽略字体堆栈，并直接进入Times

尽管使用内联回退字体堆栈，但仍会发生这种情况

我注意到类似的问题以前也在这里发布过，但只是作为一个一般性问题，与webfonts的使用无关。以前，所有字体回退都正常工作。我正在使用Litmus进行电子邮件测试

有人知道为什么会这样吗

链接到石蕊：

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和自托管文件，但没有成功（我也更新了类名）：

除字体外，尝试的解决方法：

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

@字体{
字体系列：“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“）格式（'embedded-opentype'），
url（'http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.svg#droid_serif“）格式（“svg”），
url（'http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.woff“）格式（“woff”），
url（'http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.ttf格式（'truetype'）；
字体大小：正常；
字体风格：普通；
}

Outlook特定的覆盖CSS似乎可以工作，但存在优先级问题。我不相信《展望》会承认这一点！重要的声明，所以我一直在致力于更具体的选择。然而，我仍然不明白为什么会发生这种情况，以及是否有更简单的解决方法

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

@导入url(http://www.example.css);

及

@导入url(http://fonts.googleapis.com/css?family=Oxygen);

更新二（解决方案）：

有了所有提供的帮助，很明显一些看似次要的问题都可能导致这个问题。字体面方法似乎比@import更可取。webfont名称与本地字体不相同可能会导致相同的问题，但这不是这封特定电子邮件的情况

我很早就尝试使用条件代码从Outlook中完全隐藏webfont导入代码

问题是我在head部分的CSS样式标记中做了这件事。只需将此代码放在其自己的样式标记中（如下所示），就可以实现不同

我确认了它的工作，因为我能够删除额外的变通CSS代码，我曾用于检测Outlook 2007及更高版本，以将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]-->

@字体{
字体系列：“oxygenlight”；
src:url（'http://www----/fonts/oxygen-light-webfont.eot');
src:url（'http://www.----/fonts/oxygen-light-webfont.eot?#iefix“）格式（'embedded-opentype'），
url（'http://www.-----/fonts/oxygen-light-webfont.woff“）格式（“woff”），
url（'http://www.-----/fonts/oxygen-light-webfont.ttf“）格式（'truetype'），
url（'http://www.-----/fonts/oxygen-light-webfont.svg#oxygenlightlight格式（'svg'）；
字体大小：正常；
字体风格：普通；
}

更新： 在所有版本的中调用webfonts并回退到字体堆栈 打破的前景

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

编辑：

---

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

我记得不久前也遇到过类似的问题。最后，我认为是

@import

导致了问题，我不得不使用不同的方法来导入字体

使用

@font-face

方法，而不是使用

@import

@font-face {
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 400;
  src: local('Oxygen'), local('Oxygen-Regular'),     url(http://themes.googleusercontent.com/static/fonts/oxygen/v2/eAWT4YudG0otf3rlsJD6zOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}

然后像平常一样使用字体：

h1 {
  font-family: 'Oxygen', sans-serif;
}

---

出现此问题的原因可能是您的用户在本地安装了字体版本，并且存在冲突

尝试@font face import（这是Google WebFonts的工作方式），然后简单地将字体族重命名为不同的名称

例如

致：

---

确保在其余标记中反映更改

我也遇到了这个问题，刚刚找到了一个非常简单的解决方法。导入web字体后，@media screen{}就可以用来挑选支持媒体查询的客户端，而这些客户端恰好支持web字体。因此，只需在该选择器的内部和外部指定字体系列声明，就可以对电子邮件客户端（如Outlook）隐藏特定字体，以便显示下一个适当的回退字体，并且您的web字体将很好地显示在支持它的客户端中

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);

.h1 { font-family: 'Arial', 'Helvetica', sans-serif }

@media screen {
    .h1 {
        font-family: Open Sans, 'Arial', 'Helvetica', sans-serif
    }
}

---

顺便说一句，在电子邮件中，@import通常比@font-face好。

若要让Outlook使用字体堆栈，而不是用Outlook选择的任何字体替换web字体，请添加一条条件注释，该注释仅由Outlook读取，以分配字体堆栈备份字体。定义您的web字体，但不要在条件注释中定义它，这样Outlook将忽略web字体，直接使用它的条件注释，只显示Arial

<style>
        @import url('http://www.yourdomain.com/webfont.css');
</style>

    <!--[if gte mso 9]>
        <style>
            .webfontsubstitute { font-family: arial, sans-serif; }
        </style>
    <![endif]-->

</head>
<body>

    <a href="#" target="_blank" style="font-family:superwebfont,arial,sans-serif;">
    <span class="webfontsubstitute">WEB FONT STYLED TEXT HERE</span></a>

@导入url（'http://www.yourdomain.com/webfont.css');

您必须使用“mso font alt”作为字体回退（Outlook 2010201312016）：

....
@字体{
字体系列：“droid_serif”；
src:url（'http://www.s
@font-face {
    font-family: 'droid_serif_alt';

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);

.h1 { font-family: 'Arial', 'Helvetica', sans-serif }

@media screen {
    .h1 {
        font-family: Open Sans, 'Arial', 'Helvetica', sans-serif
    }
}

<style>
        @import url('http://www.yourdomain.com/webfont.css');
</style>

    <!--[if gte mso 9]>
        <style>
            .webfontsubstitute { font-family: arial, sans-serif; }
        </style>
    <![endif]-->

</head>
<body>

    <a href="#" target="_blank" style="font-family:superwebfont,arial,sans-serif;">
    <span class="webfontsubstitute">WEB FONT STYLED TEXT HERE</span></a>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>

    ....

    <style type="text/css">

    @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;
        mso-font-alt: 'Arial';
    }

    ...

    </style>
</head>

<!--[if mso]>
    <style> 
      body,table tr,table td,table th,a,span,table.MsoNormalTable { 
        font-family: 'Arial', 'Helvetica', 'sans-serif' !important;  
      }
      .custom-headline{
          font-family: 'Times New Roman', 'serif' !important;
      }
    </style>
<![endif]-->