Outlook 2013 忽略字体系列

Question

为 Outlook 2013 编写电子邮件时指定字体系列的最佳方法是什么？我发现 font-family 在像这样内联添加时会被忽略：

<span style="font-family: Helvetica, Arial, sans-serif;">Text</span>

我发现这行得通：

<span><font face="Helvetica, Arial, sans-serif">Text</font></span>

但是，这很痛苦，因为我必须在添加文本的所有地方添加标签。将标签包裹在几个元素周围会被忽略。有没有一种方法可以让我设置一次字体就可以忘记它？

Answer 1

不幸的是，根据我的经验，font 标记是唯一在 Outlook 上始终有效的标记（Windows Phone，请看图）。您还需要为您的文本添加标准 CSS 内联，因为某些客户端不呈现 font 的 face 属性。

Answer 2

你是如何建立你的电子邮件的？如果您使用的是表格，那么

<td style="font-family: Helvetica, Arial, sans-serif;">

适用于任何客户端。仅当部分文本与其余文本不同时才需要使用跨度。

Outlook 2013 不会在 header 中忽略。我知道这一点是因为我已经建立了很多电子邮件并且我在 header 中设置了 a:visited 样式，所以 Outlook（特别是）不会将它们更改为紫色并且它确实有效！

编辑：更准确的答案是我说不，不幸的是你每次都必须指定内联样式。（一开始没看到问题的那一点！）

片段：

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 14px; line-height: 18px; text-align: center; color: #000000;">

Some text here.....
</td>
</tr>
</table>

Answer 3

强制 Outlook 2013 使用指定字体堆栈的一种有效方法是将相关文本包装在 <span> 中，并在定义 font-family 时使用 !important。 Outlook 仍会删除标头中定义的任何 Google 字体，但其他电子邮件客户端会使用它们。这是一个例子：

<head>
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
</head>

<body>
<table>
  <tr>
    <td style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
      This will always be Helvetica.
    </td>
  </tr>
</table>

<table>
  <tr>
    <td style="font-family: 'Indie Flower', Helvetica, Arial, sans-serif; font-size: 12px;">
       Outlook will display Times New Roman. Others will display Helvetica or Indie Flower.
    </td>
  </tr>
</table>

<table>
  <tr>
    <td style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
      <span style="font-family: 'Indie Flower', Helvetica, Arial, sans-serif !important;">
        Outlook will display Helvetica, others will display Indie Flower.
      </span>
    </td>
  </tr>
</table>
</body>

这来自这篇很棒的文章：https://www.emailonacid.com/blog/article/email-development/custom-font-stacks-in-outlook

Answer 4

我遇到了这个问题，发现以下 post 解决了这个问题： https://litmus.com/community/discussions/982-outlook-overrides-font-to-times-new-roman

基本上，您需要在电子邮件模板中的 body 标记之后添加以下条件 css 样式片段，您希望 Outlook 采用所需的字体系列（在本例中为 Arial， Helvetica 或 San-Serif）而不是粘性的 MSO Times-New-Roman 字体：

<!--[if mso]>
<style type="text/css">
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style>
<![endif]-->

Answer 5

我只是想指出关于这个字体问题的一些事情，没有必要像前面的答案中提到的那样将字体系列声明放在 body 标签中。

我还发现了有关此问题的其他信息，我在电子邮件中使用了 google Api 的字体，如下所示：

然后在body标签里面：

<!--[if mso]>
    <style type="text/css">
        body, table, td {font-family: 'Playfair Display', Helvetica, sans-serif !important;}
    </style>
<![endif]-->

但 Outlook 不同意使用这样的自定义字体，因此它会忽略自定义字体之后的所有其他后备字体，因此如果是这种情况，则只需删除自定义字体 google 字体，并使用类似：

<!--[if mso]>
    <style type="text/css">
        body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
    </style>
<![endif]-->

我目前在 HTML 的头部有这个 css 样式，我用 litmus 测试了这个，如果你在 body 标签中有声明，或者在头标签。

Answer 6

自定义字体不是普遍支持的功能。美国在线邮件本机 Android 邮件应用程序（不是 Gmail 应用程序）苹果邮件 iOS 邮件展望 2000 Outlook.com 应用展望 iOS 是唯一支持自定义网络字体的电子邮件客户端。

一篇有用的文章。 https://litmus.com/blog/the-ultimate-guide-to-web-fonts

Answer 7

有一个非常简单的解决方案。只需将所有内容包装在已弃用的字体元素中！

<font face="Arial">
<!-- content -->
</font>

Outlook 2013 忽略字体系列

Outlook 2013 Ignores font-family

html

css

outlook

html-email

outlook-2003