电子邮件模板在 Outlook App 上无法正常工作答案

【问题标题】：Email Template not working properly on Outlook App电子邮件模板在 Outlook App 上无法正常工作
【发布时间】：2019-03-25 17:03:20
【问题描述】：

我创建了一个电子邮件签名（HTML 模板）。这在 Outlook Web、Gmail 和其他客户端上运行良好，但在 Microsoft Outlook (Mail) 应用程序上失败。我正在使用以下代码：

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<span style="font-family: Montserrat, Arial, sans-serif; font-weight: 400; font-size: 16px !important; letter-spacing: 0px; color: #3e3e3e; margin-left: 0px;">Charlotte McMahon</span>
<br>
<span style="font-family: Montserrat, Arial, sans-serif; font-weight: 700; font-size: 12px !important; letter-spacing: 0px; text-transform: uppercase; color: #3e3e3e; line-height: 20px; margin-left: 0px;">
    Head of Block Management
</span>
<br>
<img src="https://hawkblockmanagement.com/wp-content/uploads/2019/03/Hawk-Logo.png" alt="Hawk Block Management" style="width: 150px; margin: 10px 0 20px 0;"><br>
<span style="font-family: Montserrat, Arial, sans-serif; font-weight: 400; font-size: 10px !important; letter-spacing: 1px; color: #3e3e3e !important; text-transform: uppercase; line-height: 20px; margin-left: 0px;">
    <strong>DD:</strong> 
    <a href="tel:02080161178" style="color: #3e3e3e !important; text-decoration:none !important;">020 8016 1178</a>
</span><br/>
<span style="font-family: Montserrat, Arial, sans-serif; font-weight: 400; font-size: 10px !important; letter-spacing: 1px; color: #3e3e3e !important; text-transform: uppercase; line-height: 20px; margin: 0px 10px 0 0;">
    <strong>T:</strong> 
    <a href="tel:02080164122" style="color: #3e3e3e !important; text-decoration:none !important; text-decoration:none;">020 8016 4122</a>
</span>
<br>
<span style="font-family: Montserrat, Arial, sans-serif; font-weight: 400; font-size: 10px !important; letter-spacing: 1px; color: #3e3e3e !important; text-transform: uppercase; line-height: 20px; margin-left: 0px;">
    <strong>E:</strong>
    <a href="mailto:cmcmahon@hawkbm.com" target="_blank" style="color: #3e3e3e !important; text-decoration:none !important; text-decoration:none;">cmcmahon@hawkbm.com</a>
</span><br>
<span style="font-family: Montserrat, Arial, sans-serif; font-weight: 400; font-size: 10px !important; letter-spacing: 1px; color: #3e3e3e !important; text-transform: uppercase; line-height: 20px; margin-left: 0px;">
    <strong>W:</strong>
    <a title="Hawk Block Management" href="https://hawkbm.com" style="color: #3e3e3e !important; text-decoration:none !important; text-decoration:none;" target="_blank">hawkblockmanagement.com</a></span><br>
    <div style="padding: 10px 0 0 0;"></div>
    <span style="font-family: Montserrat, Arial, sans-serif; font-weight: 400; font-size: 10px !important; letter-spacing: 1px; color: #3e3e3e !important; text-transform: uppercase; line-height: 15px;;">
        <a title="Map" href="https://goo.gl/maps/mtfqGUtziZD2" style="color: #3e3e3e !important; text-decoration:none !important; text-decoration:none;" target="_blank">Kirkdale House, Kirkdale Road,

            Leytonstone, London E11 1HP</a></span><br>
<img src="https://hawkblockmanagement.com/wp-content/uploads/2019/03/block2.jpg" alt="Hawk Block Management" style="width: 150px; margin: 20px 0 0 0;">

Outlook、Gmail 上的预期结果和结果是

但是 Outlook App 上的结果是

是否有任何解决方案可以使 Outlook Mail App 上的设计也保持一致？

【问题讨论】：

标签： html css email outlook html-email

【解决方案1】：

Outlook 倾向于忽略内联样式的图像大小。添加width="150" 这将纠正 Outlook 增长。 Outlook 将忽略放置在图像上的边距。改为向表格单元格添加填充。

<img src="https://hawkblockmanagement.com/wp-content/uploads/2019/03/Hawk-Logo.png" width="150" alt="Hawk Block Management" style="width: 150px; height: auto;">

Outlook 不支持蒙特塞拉特。它不适用于 webfonts，因此它使用 Arial 作为后备。这是有风险的，因为它可能会默认为 Times New Roman，从而使所有内容都是衬线。

祝你好运。

【讨论】：