HTML电子邮件模板问题[字体和边框底部]

Question

我遇到电子邮件模板问题：

1. 边框底部未显示
2. Windows上的字体后备不起作用

所以：我通过内联生成器运行HTML，将所有内容放入内联

1. 边境问题：

   <tr class="bottom-border">
   
   .bottom-border {
       border-bottom: 1px solid #eff3f6;
   }
   

2. 字体问题：

   @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700);
   
   body {
       font-family: 'Open Sans', "Helvetica", "Verdana", "Arial", sans-serif !important;
   }
   

字体问题在Windows上不起作用，它似乎仍然输出Times New Roman，即使我没有告诉它。在MAC上罚款它输出Open Sans

Answer 1

啊哈，我知道字体的问题是什么。

您需要将字体样式添加到表格而不是正文。

<table style="font-family: 'Open Sans', "Helvetica", "Verdana", "Arial", sans-serif !important;">

然后你有嵌套表，这也需要应用于那些。

我还需要查看内联生成器的输出，以了解未应用边框的原因。

Answer 2

Outlook HATES webfonts。它不会显示它们，如果它看起来像是在字体堆栈的开头，它将清空整个堆栈并转而使用默认字体。为了解决这个问题，我将为您提供以下几个步骤：

1. 您使用双引号（＆＃34;）搞砸了您的样式属性 在helvetica周围。它正在关闭the的style属性 第二个双引号（在helvetica之前）删除你的字体 堆。它还具有验证问题的潜力。你不 需要字体上的引号，所以我要么删除或只是使用 单引号（＆＃39;）。
2. 您应该始终在包含它的标记上内嵌您的字体（TD， DIV，P等）。这是你应该把你的堆栈放在没有的地方 网络字体。
3. 然后，您需要在容器内和周围添加span标记 将在那里声明你的webfont的文本。

至于边界底部：

1. 不要上课。你需要内联它。 例如：<td style="border-bottom: 1px solid #eff3f6;">
2. 不要将样式应用于TR标签，在TD上使用它可以获得更多 全面支持CSS。