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

Question

我已经创建了电子邮件签名（HTML模板）。在Outlook Web，Gmail和其他客户端上可以很好地运行，但在Microsoft Outlook（Mail）App上则不能。我正在使用以下代码：

<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上保持一致？

Answer 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，使所有内容都衬线。

祝你好运。