代码之家 › 专栏 › 技术社区 › Markeee

HTML电子邮件-mso回退字体-代码去哪里了?

html-email outlook email

Markeee · 技术社区 · 6 年前

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

我猜是在 <压头(>); ,但低于主CSS,因此低于 </style> ?

但我注意到,当我将代码导入我的电子邮件服务提供商(Mac Direct Mail)时,会去掉这个“看不见的代码”。为什么代码介于  这肯定会使代码不可见/不起作用?

1 回复 | 直到 6 年前

gwally 6 年前

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

电子邮件客户端将此解释为请执行以下操作:  Outlook将其解释为“请忽略”。这正好相反: 

示例:

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

Outlook Desktop client不适用于大多数webfonts,如Google fonts。Outlook将使用自己的回退字体Times New Roman,而不是使用回退字体。如果您使用衬线字体,这很好,但如果您不使用衬线字体,则会严重影响电子邮件的外观。

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

电子邮件正文中的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]-->

我希望这有帮助。

祝你好运。

推荐文章

Niloofar · Gmail中的响应电子邮件宽度

7 年前

Giacomo Ciampoli · 无法设置outlook中单元格之间的单元格间距-html电子邮件

7 年前

spz1 · iOS呈现电子邮件大小的一半

7 年前

Jamie · 如何创建HTML电子邮件模板?

7 年前

Eoin · HTML电子邮件Outlook。列下显示的com行

7 年前

nsilva · HTML5电子邮件-iOS-禁用单词建议?

7 年前

abbyworld · iOS 10中iPhone的Gmail中放大的蓝色注册商标符号

7 年前

Antoine Pelletier · 使用此技术不会在电子邮件中发送图像

7 年前

olegario · 用于电子邮件的HTML-更改CSS中的位置不起作用

7 年前

navigator · 再次单击电子邮件中的链接,重新打开同一窗口?

7 年前