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 在该列表中找不到第一个字体时,它会中断并默认为丑陋的 Times New Roman - 难道它不应该检查字体并显示确实存在的字体(Windows 上的 Arial)?
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)?
令人沮丧的是,我们甚至将这些样式声明放在文本周围的丑陋而费力的 标签中.任何和所有文本都有这些声明,样式在字体标签的
内重新完成.
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(我们使用的版本)强制所有内容为 Times New Roman 的任何说明或指示?
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>
`
推荐答案
这将解决您的问题:
<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 将完全忽略您使用的字体不可用的事实,从而否定它寻找自己的替代品的任何理由.
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.
另外,去掉你的内联 CSS 边框折叠声明,因为你可以在头部和主体中声明,给你的所有表格一个属性 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屋!