Outlook 2010不尊重CSS，即使< font>标签为每个文本 [英] Outlook 2010 not respecting CSS, even <font> tags for every text
问题描述
我们需要我们的电子邮件在有Helvetic Neue的机器上看起来不错。因此我们的字体堆栈是：
We need our emails to look good on machines that have Helvetic Neue. So our font stack is:
font-family: 'Helvetica Neue',HelveticaNeue,Helvetica,Arial,sans-serif;
我们在每个TD，每个DIV，每个TABLE，甚至BODY和一切都有样式声明。然而，Outlook打破了，默认为一个丑陋的时代新罗马，当它没有找到第一个字体在该列表 - 不是应该通过字体，并显示那些确实存在（Arial在Windows上）？
We have the style declarations in each TD, each DIV, each TABLE, even BODy and everything. Still, Outlook breaks and defaults to an ugly Times New Roman when it doesn't find the first font in that listing -- isn't it supposed to go through the fonts and show the ones that do exist (Arial on Windows)?
沮丧，我们甚至把这些样式声明放在丑陋和费力的< font> 任何和所有文本都有这些声明，样式在字体标签的< style> 中完成。
Frustrated, we even put these style declarations in ugly and laborious <font> tags all around the text. Any and all text has these declarations, with the styling done all over again inside the font tag's <style>.
Litmus显示Outlook 2003,2007和2010在Windows上的Arial中正确显示这些内容。
Litmus shows Outlook 2003, 2007 and 2010 showing these properly in Arial on Windows.
然而，在我们的办公室，所有的人都在Times New Roman收到这些电子邮件。我缺少什么？任何关于为什么Outlook 2010（我们使用的版本）强制一切都时代新罗马的方向或指针？
Yet, at our office, all the folks are receiving these emails in Times New Roman. What am I missing? Any directions or pointers about why Outlook 2010 (the version we use) forces everything to Times New Roman?
其他问题，例如此问题 - Outlook 2010覆盖字体系列从Arial到Times New Roman - 不要回答问题。
Other questions, such as this one -- Outlook 2010 overriding font-family from Arial to Times New Roman -- do NOT answer the question.
谢谢！以下是代码示例：
Thanks! Below is an example of code:
`
<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>
`
推荐答案
这将解决您的问题：
This will solve your problem:
<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>
- 我删除了不必要的重复的字体样式声明。
- 我将您的字体样式声明从span移动到TD，以及您的CSS类分配hide-on-small
字体风格与专门为了解决您的Outlook问题而分离。
- 在头部，在你可能已经声明的任何其他CSS下面，我添加了一个条件注释，它只会被Outlook读取。在这个注释中是一个CSS类，将告诉outlook的字体是Arial。因此，Outlook将完全忽略您使用不可用的字体，因此否定任何原因找到自己的替换。
The font-style was separated from the specifically to fix your Outlook problem. - In the head, below any other CSS you may have declared, I added a conditional comment which will only be read by Outlook. Within this comment is a CSS class which will tell outlook that the font is Arial. Therefore Outlook will completely ignore the fact that your using a font that isn't available, thus negating any reason for it to find its own substitution.
此外，拉出您的inline CSS border-collapse声明，因为你可以在头部和正文中声明，给所有的表一个属性border =0。而不是写style =border-collapse：none;一打或更多次。
Also, pulled out your inline CSS border-collapse declaration because you can just declare that in the head and in the body, give all your tables an attribute of border="0". Instead of writing style="border-collapse:none;" a dozen or more times.
这篇关于Outlook 2010不尊重CSS，即使< font>标签为每个文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
