用于 Outlook 的 HTML 电子邮件中的大字体答案

【问题标题】：Huge font in HTML email for Outlook用于 Outlook 的 HTML 电子邮件中的大字体
【发布时间】：2012-07-13 09:13:27
【问题描述】：

我正在为多个电子邮件客户设计HTML 中的电子邮件通讯。到目前为止，它适用于除Outlook之外的所有客户端...

字体变得如此之大，以至于表格等被打破。我已经在各处提供了 CSS 内联，并为 Outlook 添加了一些 CSS 技巧。我没有这个解决方案。这是代码；

<!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=yes">
        <meta name="viewport" content="width=600,initial-scale = 2.3,user-scalable=no">
        <title>Untitled Document</title>
        <style type="text/css">
            /* Client-specific Styles */
            #outlook a{padding:0;}

            body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;}

            body{-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}

            p {
                margin: 1em 0;
            }

            h1, h2, h3, h4, h5, h6 {
                color: black !important;
                line-height: 100% !important;
            }

            h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
                color: blue !important;
            }

            h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {
                color: red !important;
            }

            h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
                color: purple !important;
            }

            table td {
                border-collapse:collapse;
            }
            .yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span { color: black; text-decoration: none !important; border-bottom: none !important; background: none !important;}

            .ExternalClass {
                width:                        100%;
            }
            .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
                line-height:                 100%;
            }
            .ExternalClass{display:inline-block; line-height: 131%};
            .ExternalClass {width: 100%;}
            .ReadMsgBody{width: 100%;}
            table td {
                border-collapse:            collapse;
            }
            body {
                margin:                         0;
                padding:                        0;
                width:                       100%;
                overflow-y:                hidden;
                background-color:         #000000;
                -webkit-text-size-adjust:    100%;
                -ms-text-size-adjust:        100%;
                font-family:            Helvetica;
                vertical-align:               top;
                border-spacing:               0px;
                color:                    #ffffff;
            }
            p {
                margin-bottom:               10px;
                margin-left:                 35px;
                margin-right:                35px;
            }
            .container {
                width:                      600px;
                background-color:            #000;
                margin:                    0 auto;
            }
            a:link {
                color:                    #ffffff;
                text-decoration:        underline;
            }
            a:visited {
                color:                    #6E6C64;
                text-decoration:        underline;
            }
            a:hover, a:active, a:focus {
                text-decoration:             none;
            }
        </style>
    </head>

    <body margin="0" padding="0" width="100%" style="overflow-y:hidden; background-color:#000000; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;  font-family:Helvetica; vertical-align:top; border-spacing:0px; font-size:1em;">
        <table class="container" width="600px" background-color="#000000" margin="0 auto" cellpadding="0" cellspacing="0">
            <tr width="600px">
                <td style="line-height:10px;" width="600px"><img src="http://mediabunker.com/email/header.png" align="absbottom"></td>
            </tr>
            <tr bgcolor="#f8f8f8" width="600px">
                <td style="font-family:Helvetica; font-size:1em;" width="600px">
                    <h1 align="center" style="color:#000000;">Need apps? We build ‘em.</h1>

                    <p style="margin-bottom:10px; color:#575757; margin-left:35px; margin-right:35px; font-size:1em;">Het gebruik van applicaties, oftewel apps, is namelijk booming! Steeds meer merken en bedrijven zien het gemak van een app in. Het is de ideale optie voor het versterken van uw merk, zowel extern als intern, of het opzetten van een geheel nieuw product. Ook de enorme groei in gebruik van mobiele apparaten zorgt er voor dat een sterk merk niet meer kan achter blijven.</p>

                    <p style="margin-bottom:10px; color:#575757; margin-left:35px; margin-right:35px; font-size:1em;">Mocht u geïnteresseerd zijn in onze service, van op maat gemaakte applicaties en backend oplossingen, neem dan gerust contact met ons op. U bent van harte welkom voor een kop koffie bij ons in de Suikersilo's, tijdens een verkennend gesprek of een demonstratie van de mogelijkheden van apps voor mobiel, tablets, tv en het web.</p>

                    <p style="margin-bottom:10px; color:#575757; margin-left:35px; margin-right:35px; margin-bottom:60px; font-size:1em;">Alvast bedankt en hopelijk tot ziens.</p>
                </td>
            </tr>
            <tr width="600px">
                <td><img src="http://mediabunker.com/email/title.png" align="absbottom"></td>
            </tr>
            <tr bgcolor="#232323" width="600px">
                <td style="font-family:Helvetica; font-size:1em;">
                    <table height="auto" border="0" cellpadding="5px" margin-top="0" align="center" style="color:#fff;">
                        <tr align="center">
                        <td align="center"><img src="http://mediabunker.com/email/apple.png"/></td>
                        <td align="center"><img src="http://mediabunker.com/email/android.png"  /></td>
                        </tr>
                      <tr>
                        <td align="center" style="font-family:Helvetica; font-size:1em;">Apple iOS de kracht achter<br />
                          de iPhone, iPod en iPad.</td>
                        <td align="center" style="font-family:Helvetica; font-size:1em;">Android is met Google, HTC en<br />
                                            Samsung, het meest gebruikte<br />
                                            mobiele besturingssysteem.</td>
                        </tr>
                      <tr>
                        <td align="center"><img src="http://mediabunker.com/email/windows.png" /></td>
                        <td align="center"><img src="http://mediabunker.com/email/html.png" /></td>
                        </tr>
                      <tr>
                        <td align="center" style="font-family:Helvetica; font-size:1em;">Microsoft en Nokia bieden<br />
                          samen de Windows Phone, <br />
                          voor de conventionele liefhebbers.</td>
                        <td align="center" style="font-family:Helvetica; font-size:1em;">Ook een mobiele web app<br />
                          in HTML5 en CSS3<br />
                          is geen probleem!</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr width="600px">
                <td><img src="http://mediabunker.com/email/actie.png" align="absbottom"></td>
            </tr>
            <tr width="600px">
                <td>
                    <table border="0" HALIGN="center" style="margin-bottom:30px; margin-top:20px;">
                      <tr align="center">
                        <td align="center" width="189px" style="font-family:Helvetica; font-size:1em;"><font color="white">Suikersilo-West 23 <br />1165 MP Halfweg</font></td>
                        <td align="center" width="189px" style="font-family:Helvetica; font-size:1em;"><a href="tel:0031238200140">Tel +31 23 820 0140</a><br> <a href="mailto:info@mediabunker.com">info@mediabunker.com</a></td>
                        <td align="center" width="189px" style="font-family:Helvetica; font-size:1em;"><a href="http://mediabunker.com">www.mediabunker.com</a><br> <a href="http://twitter.com/mediabunker">twitter.com/mediabunker</a></td>
                      </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>

还有在线版FWIW； http://mediabunker.com/email/email.html。快速上传某人发给我的屏幕截图，这是我认为的最新 Outlook 版本。

【问题讨论】：

您是否尝试过将宽度放在 TD 而不是 TR 上并确保表格设置了宽度。
您是否尝试过在表格单元格上设置绝对字体大小？ 1em 可以代表任何东西——基于渲染引擎的默认值。
不幸的是，这也没有帮助，不过感谢您的尝试。

标签： html email fonts outlook size

【解决方案1】：

首先：发送HTML 电子邮件时使用CSS 类不是一个好主意。在包括 Outlook 在内的许多客户端中，它们将被剥离或忽略。

关于您的问题：在我看来，td 的宽度设置不正确。当我查看您的源代码时，您定义了表格的宽度，tr's 和 td's 如下。

width="600px"

这应该是

width="600"

相反。然而，更重要的是（因为 Outlook 有时喜欢忽略表格上的 HTML 属性）向您的元素添加内联 CSS，如下所示：

style="width: 600px"

不要忘记表格单元格 (td) 和父表格。

我认为应该这样做。

【讨论】：

【解决方案2】：

简答：
不要在 HTML 电子邮件中使用标题标签。无论您如何声明，一些客户都会使用标题标签破坏您的样式。

去掉h1标签
从您遇到问题的文本周围的 TR 标记中删除所有样式，并将该样式放在 td 标记中。
完全移除该元素周围的宽度并将其替换为 text-align。

长答案：

尽可能使用弃用的 HTML 标签，而不是 CSS。
1. body bgcolor="" 而不是 style="background-color..
2. td margin="0" 而不是 margin="0 auto"（更好.. 使用 cellpadding 代替）
修复
1. width="5px" .. 不要在折旧的 html 尺寸中写入 px（cellpadding 也是如此）
2. margin="0 auto" .. 不要使用速记代码
3. line-height .. 不要使用 line-height ，除非您纯粹将其用于样式设置，如果您将其用于正确格式化.. 不要指望它会起作用。
4. h1、h2、h3、h4、h5、h6 .. 不要使用它们。
5. p .. 不要使用段落，将您的样式放在 td 中，并将每个段落包装在 td 而不是 p 中。

用这段代码替换你所有的头部 CSS 直到你的身体标签，如果你认为你需要在头部添加更多的 CSS，不要。直到你熟练得多。这应该可以帮助你..

    <style type="text/css">
        /* Client-specific Styles */
        html>body {width:100% !important;-webkit-text-size-adjust:100%;margin:0;padding:0;}
        body, div, p, a, li, td{-webkit-text-size-adjust:none;}
        .ReadMsgBody, .ExternalClass {width: 100% !important;background-color:#ffffff;}
        .ExternalClass * {line-height: 100%} 
        #outlook a {padding:0;}
        table { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;}
        table td {border-collapse: collapse;}
        img {outline:none;text-decoration:none;-ms-interpolation-mode: bicubic;display:block;}
        a img{border:none;}
        p{margin: 1em 0;}
        a {color:#ffffff;}
        a:link{color:#ffffff;}
        a:visited{color:#ffffff;}
        a:hover{color:#ffffff;}
        .yshortcuts a { border-bottom: none !important;}

    </style>
</head>
<body bgcolor="#000000" style="margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;padding-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;color:#252525;font-family:Arial,sans-serif;" border="0">

【讨论】：