【发布时间】：2020-05-03 05:53:31
【问题描述】：
我已经尝试了很多修复，以使 Outlook 2007+ (07,10,13,16,19) 能够按照我构建的方式呈现我的电子邮件。
我已尝试重置文档和表格。我尝试了很多不同的容器，例如跨度、字体、p 和 td 来包含文本，所有这些容器都指定了字体大小和行高。放入元标记，更改 html 标记。然而它只是被忽略了，电子邮件上的所有文本都以 font-size: 16px 显示。
是否有明确的方法来保证我的字体以我在 Outlook 07+ 版本中编码的相同大小显示？
这是我的代码：
<!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>结果如下：
如果您参考这张图片，您会看到在 Outlook 2007+ 版本上，大标题以小得多的尺寸显示。
编辑：解决方案原来是，确保我使用类以及目标属性在头部应用样式（某些引擎必须忽略元素的目标）。除了删除 !important 的所有内联样式用法。
这是一个更新的 sn-p 供您查看：
<!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>工作代码：
非常感谢贡献者，为我省去了很多麻烦！
【问题讨论】：
-
您需要考虑的两个潜在原因：1 那些程序可能不喜欢媒体查询，2 他们可能不支持属性选择器，尝试使用 css 类甚至 id 应用字体大小来获得结果你想看。另外，请将您的代码示例缩短为 minimal reproducible example... 看起来您已经复制/粘贴了整个工作文件
-
这只是文档的 1/3。关于属性选择器的好主意。我已经能够修复它，从内联样式中删除 !important 规则。除了将字体修复类应用于包含文本的部分。
标签： html css outlook html-email