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

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

html-email outlook email

Markeee · 技术社区 · 7 年前

我正在创建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 回复 | 直到 7 年前

gwally 7 年前

这可能有点令人困惑,但电子邮件客户端会阅读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]-->

我希望这有帮助。

祝你好运。

推荐文章

Yoko · 试图用Javascript在表格中发送多个PDF块

1 年前

Shane Brodie · 生成的电子邮件中出现奇怪的字符

1 年前

user27173209 · 脚本中的newaliases导致权限被拒绝

1 年前

mmewtwosaysbye · 如何在smptlib中向电子邮件添加文件附件?

1 年前

Martin · 后端JavaScript文件EmailJS发送错误

1 年前

Tomas · Powershell在检查文件的所有路径后发送一封电子邮件

1 年前

Majoris · Django无法发送电子邮件,即使conf是正确的

1 年前

HarriS · MS Graph API:在查询中使用包含运算符

2 年前

Girjesh · Mailtrain AWS SES:请求中包含的安全令牌无效

2 年前

Alfredo Marin · 为什么我的服务没有使用我的Spring@Bean?

2 年前