11

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

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

我注意到以前在这里发布过的类似问题，但只是作为一般问题，与 webfonts 的使用无关。以前所有的字体后备都可以正常工作。我正在使用 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 能够识别 !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 更可取。使 webfont 名称与本地字体不同可能会导致相同的问题，但这并不是这封特定电子邮件所发生的情况。

我很早就尝试过条件代码来完全从 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]-->
4

6 回答 6

7

更新：这是一种 在所有版本的 Outlook 中调用 webfonts 并回退到字体堆栈的技术

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

编辑：

当您的第一个声明的字体在引号中时，Outlook 中断之前已经发生过此问题。不幸的是，这似乎是不可避免的 Outlook 错误/限制。

于 2013-08-24T23:21:09.660 回答
3

要让 Outlook 使用您的字体堆栈而不是用 Outlook 选择的任何字体替换您的网络字体，请添加一个条件注释，该注释只能由 Outlook 读取以分配您的字体堆栈备份字体。定义您的网络字体，但不要在条件注释中定义它，因此 Outlook 将忽略网络字体，直接进入它的条件注释并仅显示 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>
于 2013-12-09T01:49:12.197 回答
2

我也遇到了这个问题，刚刚找到了一个非常简单的解决方法。导入网络字体后，@media screen { }可用于挑选支持媒体查询的客户端，而这些恰好是支持网络字体的客户端。因此，只需在此选择器的内部和外部指定font-family声明，您就可以从电子邮件客户端（例如 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
    }
}

顺便说一句，Campaign Monitor 建议@import通常在电子邮件中优于@font-face。

于 2013-11-15T11:51:50.550 回答
1

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

尝试@font-face 导入（这是 Google WebFonts 的工作方式），只需将字体系列重命名为不同的名称。

例如

@font-face {
    font-family: 'droid_serif';

至：

@font-face {
    font-family: 'droid_serif_alt';

请务必在其余标记中反映更改！

于 2013-09-04T20:56:46.997 回答
1

我记得不久前有一个类似的问题。最后我认为这是@import导致问题的原因，我不得不使用不同的方法来拉入字体。

而不是使用@importgo@font-face方法。

@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;
}
于 2013-08-31T20:11:05.547 回答
1

您必须使用“ mso-font-alt ”作为字体回退（Outlook 2010,2013,2016）：

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

覆盖自定义 css 声明的另一个技巧：

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

另请查看：https ://litmus.com/community/code/36-outlook-and-fallback-fonts

于 2016-03-02T13:43:50.620 回答