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 讨厌网络字体。它不会显示它们，如果它似乎在字体堆栈的开头，它将清空整个堆栈并使用默认字体代替。为了解决这个问题，我为您准备了以下几个步骤：

1. 您使用双引号 (") 搞砸了您的样式属性 围绕着 helvetica 等等。它正在关闭样式属性 第二个双引号（就在 helvetica 之前）删除你的字体 堆。然后它也有可能出现验证问题。你不 需要字体上的引号，所以我要么删除要么只使用 单引号 (')。
2. 您应该始终在包含它的标签上内嵌您的字体（TD、 DIV、P 等）。这是你应该把你的堆栈没有 网页字体。
3. 然后您需要在容器内和您的周围添加一个 span 标签 将在此处声明您的网络字体的文本。

至边框底部：

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