Outlook 2010 不尊重 CSS，甚至是每个文本的 <font> 标签答案

【问题标题】：Outlook 2010 not respecting CSS, even <font> tags for every textOutlook 2010 不尊重 CSS，甚至是每个文本的 <font> 标签
【发布时间】：2013-09-01 08:46:14
【问题描述】：

我们需要我们的电子邮件在具有 Helvetic Neue 的机器上看起来不错。所以我们的字体栈是：

font-family: 'Helvetica Neue',HelveticaNeue,Helvetica,Arial,sans-serif;

我们在每个 TD、每个 DIV、每个 TABLE 甚至 BODy 中都有样式声明。尽管如此，当 Outlook 在该列表中找不到第一个字体时，它会中断并默认为丑陋的 Times New Roman - 它不应该遍历字体并显示确实存在的字体（Windows 上的 Arial）吗？

沮丧的是，我们甚至将这些样式声明放在了丑陋而费力的 <font> 标记中。任何和所有文本都有这些声明，样式在字体标签的<style> 内重新完成。

Litmus 显示 Outlook 2003、2007 和 2010 在 Windows 上的 Arial 中正确显示这些。

然而，在我们的办公室，所有人都在 Times New Roman 收到这些电子邮件。我错过了什么？关于为什么 Outlook 2010（我们使用的版本）将所有内容强制为 Times New Roman 的任何指示或提示？

其他问题，例如这个问题 -- Outlook 2010 overriding font-family from Arial to Times New Roman -- 不要回答这个问题。

谢谢！下面是代码示例：

<table align="center" width="95%" cellpadding="8" cellspacing="8" style="font-family: 'Helvetica Neue',Helvetica,'Arial Unicode MS',Arial,sans-serif;font-size: 14px;color: #999999;border-spacing: 0;border-collapse: collapse;">
      <tr>
      <td height="18" align="center" valign="middle" style="font-family: 'Helvetica Neue',Helvetica,'Arial Unicode MS',Arial,sans-serif;font-size: 14px;color: #999999;border-top: 1px solid #dddddd;border-bottom: 1px solid #dddddd;border-collapse: collapse;">
         <span class="hide-on-small" style="font-family: 'Helvetica Neue',Helvetica,'Arial Unicode MS',Arial,sans-serif; font-size: 14px; color: #999999;  ">Rummy & Bingo Monthly<img src="http://d3cbux4et72c14.cloudfront.net/wtd2/sep.jpg" alt=" - " width="55" height="10" style="border: 0;">  </span>Issue <span style="font-family: 'Helvetica Neue',Helvetica,'Arial Unicode MS',Arial,sans-serif; font-size: 14px; color: #999999;  ">05</span> <img src="http://d3cbux4et72c14.cloudfront.net/wtd2/sep.jpg" alt=" - " width="55" height="10" style="border: 0;"> <span style="font-family: 'Helvetica Neue',Helvetica,'Arial Unicode MS',Arial,sans-serif; font-size: 14px; color: #999999; ">Aug 2013</span>
      </td>
      </tr>
      </table>

【问题讨论】：

你能分享更多的代码吗？我想看看 font-family 之前的所有内容。
是的；其他样式使用正确吗？
是的，style 标记代码似乎有效。我已经用一些代码示例编辑了原始帖子（无法在 cmets 中添加足够的代码），它在任何地方都以正确的字体显示，除了 Outlook：

标签： css fonts outlook

【解决方案1】：

这将解决您的问题：

<style type="text/css">
    table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;}
    table td {border-collapse: collapse;}
</style>
<!--[if gte mso 9]>
    <style>.outlook { font-family: arial, sans-serif; }</style>
<![endif]-->
</head>
<body>

    <table align="center" width="95%" cellpadding="8" cellspacing="8">
        <tr>
            <td class="hide-on-small" align="center" valign="middle" style="border-top: 1px solid #dddddd;border-bottom: 1px solid #dddddd;font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 14px; color: #999999;">
                <span class="outlook">Rummy & Bingo Monthly</span>
        </td>
        </tr>
    </table>
</body>

我删除了您对字体样式声明的不必要重复。除了 TD 之外，无需在任何地方声明它。
我将您的字体样式声明从 span 移到 TD 以及您的 CSS 类分配“hide-on-small”。

字体样式与专门用于修复 Outlook 问题的字体样式分开。 - 在头部，在您可能已声明的任何其他 CSS 下方，我添加了一个只有 Outlook 才能读取的条件注释。在此注释中有一个 CSS 类，它将告诉 Outlook 字体是 Arial。因此，Outlook 将完全忽略您使用的字体不可用这一事实，从而否定它找到自己替换的任何理由。

另外，去掉你的内联 CSS 边框折叠声明，因为你可以只在头部和正文中声明，给你的所有表格一个边框 =“0”的属性。而不是写 style="border-collapse:none;"十几次或更多次。

【讨论】：

非常感谢！作品。 :)
欢迎您。很高兴我能帮上忙。我最近一直在用电子邮件做很多事情。如果您在电子邮件方面遇到任何问题，请联系我。