HTML электронная почта: жирный шрифт в Outlook не работает - PullRequest
Новая
       40

HTML электронная почта: жирный шрифт в Outlook не работает

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

UPDATE. Я перепробовал все предложения. Но все равно не могу заставить Outlook отображаться жирным шрифтом!

ОБНОВЛЕНИЕ 2. Смотрите мое решение ниже

Я создаю рассылку по электронной почте в формате HTML. <h1> выделен жирным шрифтом, но при тестировании в Outlook (2007, 2010, 2013 и т. Д.) Шрифт не выделяется жирным шрифтом. Либо Outlook применяет искусственный жир (жир) к обычному весу, либо игнорирует жирный. Принимая во внимание, что все другие почтовые клиенты используют истинный жирный шрифт шрифта.

Что я могу сделать? Конечно, заголовок <h1> должен быть выделен жирным шрифтом по умолчанию, без необходимости писать css или ставить <strong> или <b> вокруг него?

Вот мой код (который вставляется): 

h1 {
font-family:Arial Bold, Arial, sans-serif;
font-weight:bold;
}

Возможно, мне нужно поставить Arial Bold в кавычках? 

font-family:'Arial Bold', Arial, sans-serif;

Вот два изображения. Топ это как должно выглядеть. Внизу - внешний вид.

enter image description here enter image description here

Ответы [ 5 ]

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

Проблема в версиях Outlook, которые используют Microsoft Word для отображения электронной почты.Я считаю, что эти версии Outlook / Word не достаточно сложны, чтобы использовать истинный жирный шрифт шрифта.Скорее они используют поддельные / поддельные жирный шрифт - просто откармливать буквы обычного веса.Вот почему они выглядят иначе, «светлее» и уродливее, чем настоящий жирный шрифт.

То же самое с курсивом.В старых версиях Outlook / Word просто используется обычная римская версия шрифта - в них не используется курсивный шрифт (который какой-то плохой типограф потратил на разработку месяцев или лет).

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

Как отмечает @Ted Goas, Arial Bold не является веб-безопасным шрифтом.В прошлом это тоже не было частью IOS.Я предлагаю использовать Arial с font-weight: 800;.Это не совсем то же самое, что Arial Bold, но это достойный запасной вариант.

Если это проблема, вы замечаете только в Outlook и хотите сохранитьArial Bold, как шрифт для других клиентов, создайте таблицу стилей только для Outlook под существующей таблицей стилей в конце <<code><head>: 

<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
  h1 {font-family: Arial, sans-serif !important; font-weight: 800;}
</style>
<![endif]-->

. Это можно сделать для точной настройки любых проблем, которые вынайти стили в отношении Outlook.

Удачи.

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

Вы можете использовать тег <strong> вместо css.

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

К сожалению, нет хорошего и надежного способа сделать это с Arial Bold в миксе.

Arial Bold не установлен в каждой системе, поэтому стек шрифтов font-family:Arial Bold, Arial, sans-serif; пропустит Arial Bold и вместо него будет использовать Arial. Даже если вы скачаете копию Arial Bold и отправите ее как веб-шрифт, Outlook не поддерживает веб-шрифты.

Так что в системах, где не установлен Arial Bold, мы застряли с обычным Arial. Мы можем подделать смелый Arial: 

<h1 style="font-family: Arial Bold, Arial, sans-serif; font-weight: bold;">Headline Text</h1>

Это может быть в порядке, но наличие Arial Bold в стеке шрифтов все еще немного странно. В системах, в которых do установлена ​​Arial Bold, мы увидим, как Arial Bold визуализируется ... и faux-bold'd.

Я не уверен, что лучше для вашего проекта, но если бы это был я, я бы удалил Arial Bold из стека шрифтов и просто подставил обычный Arial. В каждой системе есть Arial, поэтому она более предсказуема. 

<h1 style="font-family: Arial, sans-serif; font-weight: bold;">Headline Text</h1>
0 голосов
/ 16 мая 2018

Вы также можете попробовать эту разметку: <h1><b>CASE STUDY</b></h1>

...