Question

我正在创建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>？

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

Answer 1

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

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

示例：

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

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

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

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

我希望有所帮助。

祝你好运。

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

1 个答案: