HTML 电子邮件 - mso 后备字体 - 代码去哪儿了？

Question

我正在创建 HTML 电子邮件通讯。我正在使用 Typekit 提供的网络字体。有据可查的是，使用 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 的直邮）时，会删除此 "invisible code"。为什么  之间的代码肯定会使代码 invisible/not 起作用？

Answer 1

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

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

示例：

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

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

使用 if/else，您可以通过创建自定义样式 sheet 专门针对 Outlook 使用网络安全后备字体。首选位置是在您用于定位所有电子邮件客户端的样式 sheet 之后，因为列出的最后一种样式是被使用的样式。如果您的电子邮件需要 Gotham 或 Lato 等网络字体，此样式 sheet 将指示 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 好运。

HTML 电子邮件 - mso 后备字体 - 代码去哪儿了？

HTML email - mso fallback fonts - where does code go?

email

outlook

html-email