HTML 电子邮件 - mso 后备字体 - 代码在哪里？答案

【问题标题】：HTML email - mso fallback fonts - where does code go?HTML 电子邮件 - mso 后备字体 - 代码在哪里？
【发布时间】：2018-10-24 06:00:46
【问题描述】：

我正在创建 HTML 电子邮件通讯。我正在使用 Typekit 提供的 webfonts。有据可查的是，使用 Microsoft Word 呈现电子邮件的 Outlook 版本不使用指定的备用字体，而是使用 Times New Roman（参见 https://litmus.com/blog/the-ultimate-guide-to-web-fonts）。

解决方法是针对 Outlook 并使用不同的字体堆栈：

<!--[if mso]>
<style type=”text/css”>
h1 {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->

我的问题是：这段代码去哪里了？

在<head>? 在<body>?

我猜它在 <head> 中，但在主 CSS 下方，因此在 </style> 下方？

但我注意到，当我将代码导入我的电子邮件服务提供商（Mac 版 Direct Mail）时，会去掉这个“隐形代码”。为什么 之间的代码肯定会导致代码不可见/不起作用？

【问题讨论】：

标签： email outlook html-email

【解决方案1】：

这可能有点令人困惑，但电子邮件客户端会读取 if/else 语句，即使它们被  隐藏。

电子邮件客户端将此解释为请执行：，Outlook 将其解释为请忽略。这恰恰相反：

例子：

https://jsfiddle.net/wallyglenn/5hruzos5/

Outlook 桌面客户端不适用于大多数网络字体，例如 Google 字体。 Outlook 将使用它自己的后备字体 Times New Roman，而不是使用备用字体。如果您使用的是衬线字体，这很好，但如果您不使用，它会严重影响您的电子邮件的外观。

使用 if/else，您可以通过创建自定义样式表专门针对 Outlook 使用网络安全后备字体。首选位置位于用于定位所有电子邮件客户端的样式表之后，因为列出的最后一个样式是使用的样式。如果您的电子邮件要求使用 Gotham 或 Lato 等网络字体，则此样式表将指示 Outlook 使用 Arial 或无衬线字体：

<head>
<style type="text/css>
  css for email clients
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
  body, table, td, a, h1, p {font-family: Arial, sans-serif !important;}
</style>
<![endif]-->
</head>

gte mso9 的原因是 Outlook 2007（mso 版本 9 及更高版本）开始使用 Microsoft Word 作为格式化引擎。这会导致与 Web 标准的兼容性问题，但有助于确保在 Word 中设计的文档在 Outlook 电子邮件中看起来合适。您可以使用 mso 号码定位特定版本的 Outlook。

电子邮件正文中的 if/else 示例：

<!--[if (gte mso 9)|(IE)]><!-- -->
starting code for Outlook specific thingy
<![endif]-->

[fallback goes here]

<!--[if (gte mso 9)|(IE)]>ending code if needed<![endif]-->

希望对你有帮助。

祝你在 Outlook 上好运。

【讨论】：