2015-05-05 4 views
4

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

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

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

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

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

+0

Почему вы не применяете идентификатор к тегу span, а затем назначаете семейство шрифтов желаемому идентификатору внутри внешнего CSS? http://jsfiddle.net/BradleyIW/yj73k1du/1/ – BIW

+2

Outlook разделяет раздел на электронные письма, поэтому внешний CSS нельзя использовать. – mbacon40

+0

О, ладно, это здорово знать. Можно ли использовать какой-либо стиль дома через JS? или это просто чистый HTML? – BIW

ответ

5

Эффективный способ заставить 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

0

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

1

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

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

Будет работать нормально в ЛЮБОЙ клиент. Только нужно использовать диапазон, если часть текста в нем отличается от остальных.

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

EDIT: более точный ответ был бы для меня, чтобы сказать «нет», к сожалению, вам нужно каждый раз указывать стиль в строке. (Не видели, что немного Вопроса на первый!)

фрагмент:

<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> 
+0

Это не работает для меня. «font-family» по-прежнему игнорируется, когда я добавляю встроенный стиль в таблицу, независимо от пробелов или других элементов. Есть ли у вас документация о том, что делает Outlook 2013 и не выходит из строя? Я знаю, что медиа-запросы лишены, может быть, весь заголовок нет? – mbacon40

+0

Запросы в СМИ игнорируются, но не id/classes в теге