Используя Google Webfonts в HTML-письме, я столкнулся с проблемами замены шрифтов в Outlook (2007,2010 и т.д.), которые не возникали до включения веб-сайтов. Он игнорирует стеки шрифтов и подходит к Times.
Это происходит, несмотря на использование встроенных резервных стеков шрифтов.
Я заметил похожие проблемы, которые были размещены здесь ранее, но только как общий вопрос, не связанный с использованием веб-сайтов. Раньше все резервные копии шрифтов работали правильно. Я использую Litmus для проведения тестирования по электронной почте.
Кто-нибудь знает, почему это может произойти?
Ссылка на Litmus: https://litmus.com/pub/53a33c7/screenshots
Первоначально связанные шрифты в CSS выглядели так:
<link href='http://fonts.googleapis.com/css?family=Arvo|Droid+Serif:400,700,400italic,700italic|Roboto:300' rel='stylesheet' type='text/css'>
Я также попытался использовать @font-face и самостоятельно размещенные файлы после просмотра возможного решения в другом ответе, но он не работал (я также обновил имена классов ):
За исключением попыток обхода шрифта:
<!--[if !mso]><!-->
@font-face {
font-family: 'droid_serif';
src: url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot');
src: url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.svg#droid_serif') format('svg'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.woff') format('woff'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
<!--<![endif]-->
Уязвимость, зависящая от Outlook, кажется, работает, но есть проблемы с приоритетом. Я не верю, что Outlook распознает важное объявление, поэтому я работаю над более конкретными выборами. Тем не менее, я до сих пор не понимаю, почему это происходит, и если есть более простое исправление.
Отменить выбор шрифта Outlook:
<!--[if gte mso 9]>
<style>
/* Target Outlook 2007 and 2010 */
h1 { font-family: 'Georgia',serif !important; font-weight:normal; }
h1 a { font-family: 'Georgia',serif !important; font-weight:normal; }
h2 { font-family: 'Trebuchet MS',arial, helvetica, sans-serif; font-weight:normal; }
h3 { font-family: 'Trebuchet MS',arial, helvetica, sans-serif; }
.cover,img.cover,a.cover {
display: block;
visibility: visible;
td { font-family: 'Trebuchet MS',arial, helvetica, sans-serif; }
.droid { font-family: 'Georgia', serif; }
}
</style>
<![endif]-->
Пример проблемного кода:
<td height="30" colspan="3" align="left" valign="middle" class="featured">
<h2 style="text-align: left; padding: 0; margin: 0; color: #00799f; font-family: 'Roboto',arial, helvetica, sans-serif; font-size: 21px; font-weight: 100; background: none; border-bottom: 1px solid #b1d6e2; text-decoration: none; line-height: 36px; mso-line-height-rule: exactly;">cover story</h2>
</td>
UPDATE:
Я попробовал предложение в ответах, чтобы поместить код импорта webfont в условные теги, которые исключают Outlook безрезультатно.
<!--[if !mso]><!-- -->
@import url(http://www.example.css);
<!--<![endif]-->
и
<!--[if !mso]><!-- -->
@import url(http://fonts.googleapis.com/css?family=Oxygen);
<!--<![endif]-->
ОБНОВЛЕНИЕ II (РЕШЕНИЕ):
При всей предлагаемой помощи ясно, что некоторые из незначительных проблем могут вызвать эту проблему. Метод font-face, по-видимому, предпочтительнее @import. Наличие имени webfont не будет таким же, как локальный шрифт, может вызвать ту же проблему, но это не то, что происходит с этим конкретным электронным письмом.
Я уже пробовал условный код, чтобы скрыть код импорта webfont из Outlook <!--[if !mso]><!--> вообще.
Проблема заключалась в том, что я сделал это в теге стиля CSS в разделе главы. Простое размещение этого кода в теге собственного стиля, как показано ниже, сделало разницу.
Я подтвердил, что он работает, так как мне удалось удалить дополнительный обходной код CSS, который я использовал для обнаружения версии Outlook 2007 и выше, для восстановления значений h1, h2 стандартного стека шрифтов.
<!--[if !mso]><!-->
<style type="text/css">
@font-face {
font-family: 'oxygenlight';
src: url('http://www----/fonts/oxygen-light-webfont.eot');
src: url('http://www.----/fonts/oxygen-light-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.-----/fonts/oxygen-light-webfont.woff') format('woff'),
url('http://www.-----/fonts/oxygen-light-webfont.ttf') format('truetype'),
url('http://www.-----/fonts/oxygen-light-webfont.svg#oxygenlightlight') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
<!--<![endif]-->