Outlook 2013 игнорирует семейство шрифтов

Каков наилучший способ указать семейство шрифтов при кодировании писем для Outlook 2013? Я обнаружил, что font-family игнорируется, когда он добавляется inline, как это:

<span style="font-family: Helvetica, Arial, sans-serif;">Text</span>

Я обнаружил, что это работает:

<span><font face="Helvetica, Arial, sans-serif">Text</font></span>

Однако, это боль, так как я должен добавлять тег везде, где добавляется текст. Обертывание тега вокруг нескольких элементов игнорируется. Можно ли один раз установить шрифт и забыть об этом?

Источник

6 ответов

Решение

Эффективный способ заставить Outlook 2013 использовать указанный стек шрифтов - обернуть соответствующий текст в <span> и использовать !important при определении font-family, Outlook по-прежнему будет удалять любые шрифты Google, определенные в заголовке, но другие почтовые клиенты будут использовать их. Вот пример:

<head>
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
</head>

<body>
<table>
  <tr>
    <td style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
      This will always be Helvetica.
    </td>
  </tr>
</table>

<table>
  <tr>
    <td style="font-family: 'Indie Flower', Helvetica, Arial, sans-serif; font-size: 12px;">
       Outlook will display Times New Roman. Others will display Helvetica or Indie Flower.
    </td>
  </tr>
</table>

<table>
  <tr>
    <td style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
      <span style="font-family: 'Indie Flower', Helvetica, Arial, sans-serif !important;">
        Outlook will display Helvetica, others will display Indie Flower.
      </span>
    </td>
  </tr>
</table>
</body>

Это пришло из этой замечательной статьи: https://www.emailonacid.com/blog/article/email-development/custom-font-stacks-in-outlook

Источник

У меня была эта проблема, и я нашел следующий пост, который исправил эту проблему: https://litmus.com/community/discussions/982-outlook-overrides-font-to-times-new-roman

По сути, вам нужно добавить следующий условный фрагмент стиля CSS сразу после body Отметьте в шаблоне электронной почты, что вы хотите, чтобы Outlook использовал желаемое семейство шрифтов (в данном случае Arial, Helvetica или San-Serif) вместо липкого шрифта MSO Times-New-Roman:

<!--[if mso]>
<style type="text/css">
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style>
<![endif]-->
Источник

Есть очень простое решение, которое работает. Просто оберните все в устаревший элемент шрифта!

<font face="Arial">
<!-- content -->
</font>
Источник

Я просто хотел кое-что указать на эту проблему со шрифтами, что нет необходимости помещать объявление семейства шрифтов в тег body, как упомянуто в предыдущих ответах CoderRoller.

Также я нашел что-то еще об этой проблеме, я использовал шрифт Google Api внутри письма, как это:

А затем внутри тега body:

<!--[if mso]>
    <style type="text/css">
        body, table, td {font-family: 'Playfair Display', Helvetica, sans-serif !important;}
    </style>
<![endif]-->

Но Outlook не согласен с наличием такого шрифта, поэтому он игнорирует все другие запасные шрифты, которые следуют за вашим шрифтом, поэтому, если это ваш случай, просто удалите пользовательский шрифт Google и используйте что-то вроде:

<!--[if mso]>
    <style type="text/css">
        body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
    </style>
<![endif]-->

В настоящее время у меня есть этот стиль CSS в заголовке HTML, я тестировал его с лакмусом, и не имеет значения, есть ли у вас объявление внутри тега body или в теге head.

Источник

Как вы строите свои электронные письма? Если вы используете таблицы, то

<td style="font-family: Helvetica, Arial, sans-serif;">

Будет хорошо работать в любом клиенте. Необходимо использовать span, только если часть текста отличается от остальных.

Outlook 2013 НЕ игнорирует в шапке. Я знаю это, потому что я создал много электронных писем, и я ввожу в заголовок: посещения, поэтому Outlook (в частности) не меняет их на фиолетовый, и это определенно работает!

РЕДАКТИРОВАТЬ: более точный ответ был бы для меня, чтобы сказать нет, к сожалению, вы должны указывать стиль inline каждый раз. (Сначала этот вопрос не видел!)

Snippet:

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 14px; line-height: 18px; text-align: center; color: #000000;">

Some text here.....
</td>
</tr>
</table>
Источник

К сожалению, по моему опыту font тег - это единственное, что работает последовательно в Outlook (и Windows Phone, см. рисунок). Вы также захотите добавить стандартную строку CSS для вашего текста, потому что некоторые клиенты не отображают font"s face приписывать.

Источник

Пользовательский шрифт не является универсально поддерживаемой функцией. Почтовое приложение AOL Mail Native Android (не приложение Gmail) Apple Mail iOS Mail Outlook 2000 Приложение Outlook.com Outlook iOS являются единственными почтовыми клиентами, которые поддерживают пользовательские веб-шрифты.

полезная статья. https://litmus.com/blog/the-ultimate-guide-to-web-fonts

Источник
Другие вопросы по тегам