Шаблон электронной почты не работает должным образом в приложении Outlook

Question

Я создал подпись электронной почты (шаблон 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 -

Есть ли какое-либо решение для согласования дизайна в приложении Outlook Mail?

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 не поддерживает Монтсеррат.Он не работает с веб-шрифтами, поэтому он использует Arial как запасной вариант.Это рискованно, потому что может по умолчанию использовать Times New Roman, делая все засечками.

Удачи.