HTML электронная почта - резервные шрифты mso - куда идет код? - PullRequest
Новая
       30

HTML электронная почта - резервные шрифты mso - куда идет код?

0 голосов
/ 14 мая 2018

Я создаю рассылку по электронной почте в формате HTML. Я использую веб-шрифты, обслуживаемые Typekit. Хорошо задокументировано, что версии Outlook, использующие Microsoft Word для визуализации электронной почты, используют не указанный резервный шрифт, а Times New Roman (см. https://litmus.com/blog/the-ultimate-guide-to-web-fonts).

Обходной путь заключается в том, чтобы настроить таргетинг на Outlook и использовать другой стек шрифтов: 

<!--[if mso]>
<style type=”text/css”>
h1 {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->

Мой вопрос: куда уходит этот код?

В <head>? В <body>?

Я предполагаю, что он идет в <head>, но ниже основного CSS, следовательно, ниже </style>?

Но я заметил, что когда я импортирую код в моего поставщика услуг электронной почты (Direct Mail для Mac), этот «невидимый код» удаляется. Почему код между <!-- --> наверняка делает код невидимым / не работает?

1 Ответ

0 голосов
/ 14 мая 2018

Это может немного сбивать с толку, но почтовые клиенты читают операторы if / else, даже если они скрыты <!-- -->.

Почтовые клиенты интерпретируют это так, как это делают: <!--[if !mso]><!-- --> и Outlook интерпретирует это как игнорирование. Это как раз наоборот: <!--[if (gte mso 9)|(IE)]><!-- -->

Пример:

Клиент Outlook Desktop не работает с большинством веб-шрифтов, таких как шрифты Google. Вместо использования резервного шрифта Outlook будет использовать собственный резервный шрифт Times New Roman. Это замечательно, если вы используете шрифт с засечками, но если это не так, это может серьезно повлиять на внешний вид вашей электронной почты.

Используя if / else, вы можете специально настроить Outlook на использование нестабильного шрифта websafe, создав собственную таблицу стилей. Предпочтительное расположение - после таблицы стилей, которую вы используете для таргетинга всех почтовых клиентов, поскольку последний используемый стиль является тем, который используется. Если ваша электронная почта требует веб-шрифта, такого как Gotham или Lato, эта таблица стилей будет указывать Outlook использовать Arial или шрифт без засечек: 

<head>
<style type="text/css>
  css for email clients
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
  body, table, td, a, h1, p {font-family: Arial, sans-serif !important;}
</style>
<![endif]-->
</head>

Причина gte mso9 заключается в том, что Outlook 2007 (mso версии 9 и выше) начал использовать Microsoft Word в качестве механизма форматирования. Это вызвало проблемы совместимости с веб-стандартами, но помогло убедиться, что документ, разработанный в Word, выглядит соответствующим образом в электронной почте Outlook. Вы можете настроить таргетинг на определенные версии Outlook, используя номер mso.

Пример if / else в теле письма: 

<!--[if (gte mso 9)|(IE)]><!-- -->
starting code for Outlook specific thingy
<![endif]-->

[fallback goes here]

<!--[if (gte mso 9)|(IE)]>ending code if needed<![endif]-->

Надеюсь, это поможет.

Удачи в Outlook.

...