时间戳

首页 > 解决方案 > 如何构建一个带有按钮的 mailchimp 模板，该按钮使用将导出到 MandrillApp 的字体 Latos 而不中断？

css - 如何构建一个带有按钮的 mailchimp 模板，该按钮使用将导出到 MandrillApp 的字体 Latos 而不中断？

问题描述

今天，如果您使用拖放编辑器构建 MailChimp 电子邮件，并带有一个使用 Lato 字体的按钮，然后您将其导出到 Mandrill 以用于事务性电子邮件，则该按钮会损坏。它最终看起来像这样：

缺少填充的登录按钮

而不是这样：

带填充的登录按钮

有没有其他人经历过这个，有没有人找到一个好的解决方案？

标签： cssemailbuttonmailchimpmandrill

解决方案

导出使按钮看起来像这样：

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
    <tr>
        <td style="padding-top:0; padding-right:18px; padding-bottom:18px; padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
            <table border="0" cellpadding="0" cellspacing="0" class="mcnButtonContentContainer" style="border-collapse: separate !important;border: 2px solid #FFFFFF;border-radius: 6px;background-color: #B6121B;">
                <tbody>
                    <tr>
                        <td align="center" valign="middle" class="mcnButtonContent" style="font-family: Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 12px; padding: 12px;">
                            <a class="mcnButton " title="Login" href="*|SITE_URL|*/home" target="_blank" style="font-weight: bold;letter-spacing: normal;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;">Login</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</tbody>

请特别注意它对字体系列所做的事情mcnButtonContent- 它将后备字体 (Helvetica Neue) 包裹在转义引号中。这是问题所在，因为当它在电子邮件客户端中呈现时，它会过早关闭样式标记。

我解决这个问题的方法是每次将 MailChimp 模板导出到 Mandrill 时用单引号替换引号。这很乏味且很容易错过，但唯一的其他解决方案是使用我的营销部门不想要的不同字体。

推荐阅读