为什么 Outlook 2007、10、13、16、19 会更改我的字体大小？
[英]Why are my font-sizes changed by Outlook 2007, 10, 13, 16, 19?
问题描述
I have tried so many fixes to enable Outlook 2007+ (07,10,13,16,19) to render my email as I have built it.
我已经尝试了很多修复程序来使 Outlook 2007+ (07,10,13,16,19) 在我构建它时呈现我的电子邮件。
I have tried resetting the document & tables.我尝试重置文档和表格。 I tried a lot of different containers such as spans, font, p & td's to contain the text, all with the font-size and line-height specified.我尝试了很多不同的容器，例如跨度、字体、p 和 td 来包含文本，所有这些都指定了字体大小和行高。 Put meta tags in, changed the html tag.放入元标记，更改 html 标记。 Yet it is just ignored and all of the text on the email is displayed at font-size: 16px.然而它只是被忽略了，电子邮件上的所有文本都以 font-size: 16px 显示。
Is there a definitive way to guarantee my fonts are displayed at the same size I have coded them to be within the Outlook 07+ versions?有没有确定的方法来保证我的字体以我在 Outlook 07+ 版本中编码它们的相同大小显示？
Here is my code:这是我的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <meta http-equiv="Content-Type" content="text/html charset=UTF-8"> <meta name="viewport" content="width=device-width"> <meta content="telephone=no" name="format-detection"> <meta name="ProgId" content="Word.Document" /> <meta name="Generator" content="Microsoft Word 12" /> <meta name="Originator" content="Microsoft Word 12" /> <!--[if !mso]><!--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--<![endif]--> <title>blah Terminal</title> <link href="" rel="icon" type="image/x-icon"> <!--[if mso]> <style> .fallback-font { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } </style> <![endif]--> <!--[if gte mso 9]> <style> a:visited { color:#f58220; } </style> <![endif]--> <!--[if (gte mso 9)|(IE)]> <style type="text/css"> table { border-collapse: collapse; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; } </style> <![endif]--> <!--[if gt mso 15]> <style type="text/css" media="all"> table, tr, td { border-collapse: collapse; } </style> <![endif]--> <!--[if gtemso 9]><xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml><![endif]--> <style type="text/css"> /* Fonts */ h1, h2, h3, h4, h5, h6, body, p, a, input, textarea, button, input[type=text], input[type=submit], table, td, div, span, * { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: bold!important; line-height: inherit; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } h1, h2, h3, h4, h5, h6 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: bold!important; margin:0; } body, p, a, input, textarea, button, input[type=text], input[type=submit], table, td, div, span { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: bold!important; } /* END Fonts */ body { margin: 0 auto !important; padding: 0 !important; height: 100% !important; width: 100% !important; } table, td { border-collapse: collapse; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; } img { display: block; white-space: pre-line; -ms-interpolation-mode:bicubic; } a { text-decoration: none; } .ExternalClass * { line-height: 115%; } @media only screen and (max-width: 640px) { table[class=full-width], img[class=full-width], table[class=full-width_footer], a[class=full-width], div[class=full-width] { width: 100% !important; height: auto !important; } } @media only screen and (max-width: 480px) { table[class=small-full-width], img[class=small-full-width], table[class=small-full-width_footer], a[class=small-full-width], div[class=small-full-width] { width: calc(100% - 40px)!important; height: auto !important; } } @media only screen and (max-width: 640px) { table[class=full-width-margin] { width: 100% !important; height: auto !important; margin: 0 0 20px !important; } } @media only screen and (max-width: 640px) { td[class=singleColumn] { width: 100% !important; float: left !important; } } @media only screen and (max-width: 640px) { table[class=hide], td[class=hide], tr[class=hide], span[class=hide] { display: none !important; } } @media only screen and (max-width: 640px) { td[class=textJustify], a[class=textJustify] { text-align: justify !important; } } @media only screen and (max-width: 640px) { td[class=textCenter], a[class=textCenter] { text-align: center !important; } } @media only screen and (max-width: 640px) { td[class=textRight], a[class=textRight] { text-align: right !important; } } @media only screen and (max-width: 640px) { div[class=show] { display: block !important; } } @media only screen and (max-width: 640px) { td[class=smallTxt], a[class=smallTxt], span[class=smallTxt] { font-size: 11px !important; } } @media only screen and (max-width: 640px) { td[class=mediumTxt], a[class=mediumTxt], span[class=mediumTxt] { font-size: 14px !important; } } @media only screen and (max-width: 640px) { td[class=largeTxt], a[class=largeTxt], span[class=largeTxt] { font-size: 18px !important; } } @media only screen and (max-width: 640px) { table[class=singleColumnMobileShow] { display: block !important; visibility: visible !important; overflow: auto !important; width: 100% !important; height: auto !important; max-height: none !important; } } @media only screen and (max-width: 640px) { tr[class=singleColumnMobileShow] { display: block !important; visibility: visible !important; overflow: auto !important; width: 100% !important; height: auto !important; max-height: none !important; } } @media only screen and (max-width: 640px) { td[class=singleColumnMobileShow] { display: block !important; visibility: visible !important; overflow: auto !important; width: 100% !important; height: auto !important; max-height: none !important; } } @media only screen and (max-width: 640px) { [class=mobile-show] { overflow: visible !important; height: auto !important; display: block !important; line-height: 100% !important; } } @media only screen and (min-width: 481px) { div[class=singleColumnMobileShow] { display: block !important; visibility: visible !important; overflow: auto !important; width: 100% !important; height: auto !important; max-height: none !important; } } a:visited { color: #f58220; } </style> <style sh-font-styles=""> /* Generated by SharpSpring -- Do not edit */ [class].font1 {font-family: 'Open Sans',Arial, sans-serif !important;} [class].font2 {font-family: 'Open Sans',Arial, sans-serif !important;} </style> </head> <body bgcolor="#c6c6c6" class="body" style="margin:0;padding:0 !important;mso-line-height-rule:exactly;"> <!--[if mso]> <style type="text/css"> body, table, td, a, span { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } </style> <![endif]--> <table width="100%" bgcolor="#c6c6c6" border="0" cellspacing="0" cellpadding="0" style="width:100%;"> <tr> <td align="center" valign="top" width="100%"> <table width="640" border="0" cellspacing="0" cellpadding="0" class="full-width" style="width:640px;color:black;"> <tr> <td width="640" align="center" valign="top"> <table bgcolor="#68659f" width="640" border="0" cellspacing="0" cellpadding="0" class="full-width" style="width:640px;"> <tr> <td width="20" valign="top"><img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/blah/19/10/25/img/blank.png" width="20" style="display:block;"> </td> <td class="hide" width="50" valign="top"><img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/blah/19/10/25/img/blank.png" width="50" style="display:block;"> </td> <td width="500" align="center" valign="top"> <table width="500" border="0" cellspacing="0" cellpadding="0" class="full-width" style="width:500px;"> <tr> <td width="500" valign="top" height="20" style="line-height:20px;font-size:20px !important;"> </td> </tr> <tr> <td width="500" align="center" valign="top" style="color:#0d233e;line-height:28px;font-size:24px !important;font-weight:bold;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif !important;"> <span style="font-size:24px !important;line-height:28px;mso-line-height-alt:32px;">Are you still interested in how</span><br/> <span style="font-size:24px !important;line-height:28px;mso-line-height-alt:32px;color:#ffffff;">blah Terminal</span> <span style="font-size:24px !important;line-height:28px;">can help you outperform your Investment Management peers?</span> </td> </tr> <tr> <td width="500" valign="top" height="10" style="line-height:10px;font-size:10px !important;"> </td> </tr> <tr> <td width="500" align="center" valign="top" style="color:#ffffff;font-size:12px !important;line-height:16px;mso-line-height-alt:20px;font-weight:bold;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif !important;"> <span style="font-size:12px !important;line-height:16px;mso-line-height-alt:20px;">blah Terminal is the smarter platform for Investment Professionals. Innovative design and one-click navigation bring important events to your attention and helps you perform your role more efficiently.</span> </td> </tr> <tr> <td width="500" valign="top" height="20" style="line-height:20px;font-size:20px !important;"> </td> </tr> <tr> <td width="500" align="center" valign="top"> <div class="small-full-width"> <!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://free-trial.blahterminal.com/?MC=1&FirstName={$firstName}&LastName={$lastName}&Email={$emailAddress}" style="v-text-anchor:middle;width:320px;" arcsize="25%" stroke="f" fillcolor="#ffffff"> <w:anchorlock/> <center> <![endif]--> <a class="small-full-width" href="https://free-trial.blahterminal.com/?MC=1&FirstName={$firstName}&LastName={$lastName}&Email={$emailAddress}" style="background-color:#ffffff;border-radius:10px;color:#24508c;display:inline-block;font-family:Helvetica,Arial,sans-serif !important;font-size:12px !important;font-weight:bold;text-align:center;text-decoration:none;width:320px;padding:10px 5px;-webkit-text-size-adjust:none;">GET YOUR FREE TRIAL OF blah TERMINAL</a> <!--[if mso]> </center> </v:roundrect> <![endif]--> </div> </td> </tr> <tr> <td width="500" valign="top" height="30" style="line-height:30px;font-size:30px !important;"> </td> </tr> </table> </td> <td class="hide" width="50" valign="top"><img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/blah/19/10/25/img/blank.png" width="50" style="display:block;"> </td> <td width="20" valign="top"><img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/blah/19/10/25/img/blank.png" width="20" style="display:block;"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>
And here are the results:结果如下：
If you refer to this image you can see the big title is displayed at a much smaller size on the outlook 2007+ versions.如果您参考此图像，您可以看到大标题在 Outlook 2007+ 版本中以小得多的尺寸显示。
Edit: The solution turned out to be, make sure I am applying the styles in the head using a class as well as by targeting attributes (some engines must ignore targeting of elements).编辑：结果证明，解决方案是，确保我使用类和目标属性应用头部中的样式（某些引擎必须忽略元素的目标）。 Along with removing all inline-style uses of !important.除了删除 !important 的所有内联样式使用。
Here is an updated snippet for you to see:这是一个更新的片段供您查看：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <meta http-equiv="Content-Type" content="text/html charset=UTF-8"> <meta name="viewport" content="width=device-width"> <meta content="telephone=no" name="format-detection"> <meta name="ProgId" content="Word.Document" /> <meta name="Generator" content="Microsoft Word 12" /> <meta name="Originator" content="Microsoft Word 12" /> <!--[if !mso]><!--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--<![endif]--> <title>Example Terminal</title> <link href="" rel="icon" type="image/x-icon"> <!--[if mso]> <style> .fallback-font { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } </style> <![endif]--> <!--[if gte mso 9]> <style> a:visited { color:#f58220; } </style> <![endif]--> <!--[if (gte mso 9)|(IE)]> <style type="text/css"> table { border-collapse: collapse; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; } </style> <![endif]--> <!--[if gt mso 15]> <style type="text/css" media="all"> table, tr, td { border-collapse: collapse; } </style> <![endif]--> <!--[if gtemso 9]><xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml><![endif]--> <style type="text/css"> /* Fonts */ h1, h2, h3, h4, h5, h6, body, p, a, input, textarea, button, input[type=text], input[type=submit], table, td, div, span, *, .base { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: bold!important; line-height: inherit; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } h1, h2, h3, h4, h5, h6 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: bold!important; margin:0; } body, p, a, input, textarea, button, input[type=text], input[type=submit], table, td, div, span { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: bold!important; } /* END Fonts */ body { margin: 0 auto !important; padding: 0 !important; height: 100% !important; width: 100% !important; } table, td { border-collapse: collapse; mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; } img { display: block; white-space: pre-line; -ms-interpolation-mode:bicubic; } a { text-decoration: none; } .ExternalClass * { line-height: 115%; } @media only screen and (max-width: 640px) { table[class=full-width], img[class=full-width], table[class=full-width_footer], a[class=full-width], div[class=full-width] { width: 100% !important; height: auto !important; } } @media only screen and (max-width: 480px) { table[class=small-full-width], img[class=small-full-width], table[class=small-full-width_footer], a[class=small-full-width], div[class=small-full-width] { width: calc(100% - 40px)!important; height: auto !important; } } @media only screen and (max-width: 640px) { table[class=full-width-margin] { width: 100% !important; height: auto !important; margin: 0 0 20px !important; } } @media only screen and (max-width: 640px) { td[class=singleColumn] { width: 100% !important; float: left !important; } } @media only screen and (max-width: 640px) { table[class=hide], td[class=hide], tr[class=hide], span[class=hide] { display: none !important; } } @media only screen and (max-width: 640px) { td[class=textJustify], a[class=textJustify] { text-align: justify !important; } } @media only screen and (max-width: 640px) { td[class=textCenter], a[class=textCenter] { text-align: center !important; } } @media only screen and (max-width: 640px) { td[class=textRight], a[class=textRight] { text-align: right !important; } } @media only screen and (max-width: 640px) { div[class=show] { display: block !important; } } @media only screen and (max-width: 640px) { td[class=smallTxt], a[class=smallTxt], span[class=smallTxt] { font-size: 11px !important; } } @media only screen and (max-width: 640px) { td[class=mediumTxt], a[class=mediumTxt], span[class=mediumTxt] { font-size: 14px !important; } } @media only screen and (max-width: 640px) { td[class=largeTxt], a[class=largeTxt], span[class=largeTxt] { font-size: 18px !important; } } @media only screen and (max-width: 640px) { table[class=singleColumnMobileShow] { display: block !important; visibility: visible !important; overflow: auto !important; width: 100% !important; height: auto !important; max-height: none !important; } } @media only screen and (max-width: 640px) { tr[class=singleColumnMobileShow] { display: block !important; visibility: visible !important; overflow: auto !important; width: 100% !important; height: auto !important; max-height: none !important; } } @media only screen and (max-width: 640px) { td[class=singleColumnMobileShow] { display: block !important; visibility: visible !important; overflow: auto !important; width: 100% !important; height: auto !important; max-height: none !important; } } @media only screen and (max-width: 640px) { [class=mobile-show] { overflow: visible !important; height: auto !important; display: block !important; line-height: 100% !important; } } @media only screen and (min-width: 481px) { div[class=singleColumnMobileShow] { display: block !important; visibility: visible !important; overflow: auto !important; width: 100% !important; height: auto !important; max-height: none !important; } } a:visited { color: #f58220; } </style> <style sh-font-styles=""> /* Generated by SharpSpring -- Do not edit */ [class].font1 {font-family: 'Open Sans',Arial, sans-serif !important;} [class].font2 {font-family: 'Open Sans',Arial, sans-serif !important;} </style> </head> <body bgcolor="#c6c6c6" class="body" style="margin:0;padding:0;mso-line-height-rule:exactly;"> <!--[if mso]> <style type="text/css"> body, table, td, a, span { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } </style> <![endif]--> <table width="100%" bgcolor="#c6c6c6" border="0" cellspacing="0" cellpadding="0" style="width:100%;"> <tr> <td align="center" valign="top" width="100%"> <table width="640" border="0" cellspacing="0" cellpadding="0" class="full-width" style="width:640px;color:black;"> <tr> <td width="640" align="center" valign="top"> <table bgcolor="#68659f" width="640" border="0" cellspacing="0" cellpadding="0" class="full-width" style="width:640px;"> <tr> <td width="20" valign="top"><img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/Example/19/10/25/img/blank.png" width="20" style="display:block;"> </td> <td class="hide" width="50" valign="top"><img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/Example/19/10/25/img/blank.png" width="50" style="display:block;"> </td> <td width="500" align="center" valign="top"> <table width="500" border="0" cellspacing="0" cellpadding="0" class="full-width" style="width:500px;"> <tr> <td width="500" valign="top" height="20" style="line-height:20px;font-size:20px;"> </td> </tr> <tr> <td class="base" width="500" align="center" valign="top" style="color:#0d233e;line-height:28px;font-size:24px;font-weight:bold;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;"> <span class="base" style="font-size:24px;line-height:28px;mso-line-height-alt:32px;">Are you still interested in how</span><br/> <span class="base" style="font-size:24px;line-height:28px;mso-line-height-alt:32px;color:#ffffff;">Example Terminal</span> <span class="base" style="font-size:24px;line-height:28px;">can help you outperform your Investment Management peers?</span> </td> </tr> <tr> <td width="500" valign="top" height="10" style="line-height:10px;font-size:10px;"> </td> </tr> <tr> <td class="base" width="500" align="center" valign="top" style="color:#ffffff;font-size:12px;line-height:16px;mso-line-height-alt:20px;font-weight:bold;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;"> <span class="base" style="font-size:12px;line-height:16px;mso-line-height-alt:20px;">Example Terminal is the smarter platform for Investment Professionals. Innovative design and one-click navigation bring important events to your attention and helps you perform your role more efficiently.</span> </td> </tr> <tr> <td width="500" valign="top" height="20" style="line-height:20px;font-size:20px;"> </td> </tr> <tr> <td width="500" align="center" valign="top"> <div class="small-full-width"> <!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://free-trial.Exampleterminal.com/?MC=1&FirstName={$firstName}&LastName={$lastName}&Email={$emailAddress}" style="v-text-anchor:middle;width:320px;" arcsize="25%" stroke="f" fillcolor="#ffffff"> <w:anchorlock/> <center> <![endif]--> <a class="small-full-width base" href="https://free-trial.Exampleterminal.com/?MC=1&FirstName={$firstName}&LastName={$lastName}&Email={$emailAddress}" style="background-color:#ffffff;border-radius:10px;color:#24508c;display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:bold;text-align:center;text-decoration:none;width:320px;padding:10px 5px;-webkit-text-size-adjust:none;">GET YOUR FREE TRIAL OF Example TERMINAL</a> <!--[if mso]> </center> </v:roundrect> <![endif]--> </div> </td> </tr> <tr> <td width="500" valign="top" height="30" style="line-height:30px;font-size:30px;"> </td> </tr> </table> </td> <td class="hide" width="50" valign="top"><img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/Example/19/10/25/img/blank.png" width="50" style="display:block;"> </td> <td width="20" valign="top"><img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/Example/19/10/25/img/blank.png" width="20" style="display:block;"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>
Working code in action:运行中的工作代码：
Massive thank you to contributors, saved me so much hassle!非常感谢贡献者，为我省去了很多麻烦！ <3 <3
1 个解决方案
解决方案1
1 已采纳 2020-01-17 08:31:49
Remove all inline !important statements you've added.删除您添加的所有内联 !important 语句。 That is causing the issues in Outlook.这导致了 Outlook 中的问题。
Not sure why (may be that inline !important statements aren't valid) but there is no need for them in the objects initial state.不知道为什么（可能是内联 !important 语句无效）但在对象初始状态下不需要它们。
!important should only be used in the head to overwrite your object's initial state. !important 应该只用于头部来覆盖对象的初始状态。
I would also shift away from attribute selectors in your head CSS.我也会在你的头部 CSS 中远离属性选择器。 It's outdated and may not work everywhere any more.它已经过时，可能不再适用于任何地方。 I would simply convert them to general class declarations.我只是将它们转换为通用类声明。
ie: table[class=full-width] becomes .full-width .即： table[class=full-width]变成.full-width 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Outlook 2003和字体大小 - Outlook 2003 and Font-Sizes
为什么我的元素使用 2 种不同的字体大小？ - Why my element uses 2 different font-sizes?
为什么某些字体大小在移动浏览器中呈现得更大？ - Why some font-sizes rendered larger in mobile browsers?
为什么这些具有相同样式标签的页面会产生不同的字体大小？ - Why are these pages with identical style tags producing different font-sizes?
Outlook 2007/10和13忽略条件CSS - Outlook 2007 / 10 & 13 ignoring Conditional CSS
在Windows Phone 7.5上的Internet Explorer中将边距应用于body元素时，为什么我的字体大小如此混乱？ - Why are my font-sizes so messed up when applying a margin to the body element in Internet Explorer on Windows Phone 7.5?
在同一基线上对齐不同的字体大小 - Align different font-sizes on same baseline
在HTML中添加字体大小会覆盖我所有的字体大小 - Adding font-size to HTML overrides all my font-sizes
当使用小字体大小时，为什么“超凡字体”图标顶部会出现奇怪的“边距”？ - Why Font Awesome icons have weird “margin” on top when using small font-sizes?
使用ems时奇怪但明确具体的字体大小 - Strange, but clearly specific font-sizes when using ems
相关标签