Может ли Outlook 2010 использовать веб-шрифт в html-письме?

Я пробовал несколько вещей, включая обертывание css. Любые идеи о том, как получить html-адрес Outlook 2010 для использования webfont, а не по умолчанию для предустановленного шрифта?

Вот некоторые из вещей, которые я пробовал:

    <style type="text/css">
    @font-face {
    font-family: 'thegirlnextdoor';
    src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot'); /* IE9 Compat Modes */
    src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */    url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.woff') format('woff'), /* Modern Browsers */
     url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.svg') format('svg'); /* Legacy iOS */
}
</style>

Ответы

Ответ 1

Следующий метод не требует повторного использования условных комментариев. Я тестировал это широко:

Встраивайте семейство веб-безопасных шрифтов, как обычно, но с дополнительным именем класса в элементе. (Если вы используете автоматический CSS-интерфейс, то можете указать ваши веб-безопасные шрифты с остальной частью вашего CSS с помощью .webfont classname.)
```
<td style="font-family: arial, sans-serif;" class="webfont">Text</td>
```

В <head> переопределите семейство веб-безопасных шрифтов с вашим webfont следующим образом:

<style type="text/css">
  @import url(http://mysuperjazzywebfont.com/webfont.css);

  @media screen { /* hides this rule from unsupported clients */ 
    .webfont {
       font-family: "Super Jazzy Webfont", arial, sans-serif !important;
    }
  }
</style>

Примечание. Объединение класса .webfont в простой запрос @media screen просто не позволяет Outlook 07, 10 и 13 ошибочно использовать Times New Roman вместо ваших резервных шрифтов. Ссылка

Эти клиенты отображают веб-шрифт:

Apple Mail
Почта iOS
Клиент электронной почты Android 4.2
Lotus Notes 8
Outlook 2000
Outlook 2011
AOL Webmail (в браузерах, поддерживающих @media)

Следующие версии Outlook получают Arial:

Outlook 2002
Outlook 2003
Outlook 2007 (вместо Times New Roman)
Outlook 2010 (вместо Times New Roman)
Outlook 2013 (вместо Times New Roman)

... и многие другие более предсказуемые клиенты получают Arial.

Ответ 2

Outlook '03, '07, '10 и '13 не поддерживают webfonts. Outlook'00 и '11 do.

Вы также должны помнить об отказе. Если вы помещаете объявление кавычек или webfont в стек, неподдерживаемые версии Outlook вернутся к Times New Roman, полностью игнорируя ваш стек шрифтов. После долгих испытаний это кажется лучшим решением для всех клиентов.

Поместите это в свой тег стиля заголовка:

@import url(http://fonts.googleapis.com/css?family=Lobster);

Используйте его следующим образом:

<font style="font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #000000;">
<!--[if (!mso 14)&(!mso 15)]><!--><font style="font-family: Lobster, 'Lobster', Arial, Helvetica, sans-serif; font-size: 18px; color: #000000;"><!--<![endif]-->
Your text here
<!--[if (!mso 14)&(!mso 15)]><!--></font><!--<![endif]-->
</font>

Это должно работать на клиентах, которые поддерживают webfonts, и изящно возвращаются к стеку шрифтов в остальном. Вы также можете объявить свой внешний стек в <td>, если хотите.

Да, я знаю, Лобстер - уродливый webfont, но он хорошо работал для тестирования...

Ответ 3

Я лично никогда не пытался это сделать, но поскольку вы определили лицо шрифта, я попробую следующее, чтобы увидеть, будет ли оно применяться:

html, body{
    font-family: 'thegirlnextdoor', sans-serif !important;
}

Если у вас есть дополнительные настройки для font-family на 'thegirlnextdoor', которые не загружаются должным образом, вы можете добавить его после него, как я сделал, добавив семейство шрифтов sans-serif.

Обратите внимание, что если вы используете это в почтовом клиенте, фрагмент my имеет нежелательные эффекты. Если это так, вам нужно будет найти раздел для его применения. Например, примените только теги p. В большинстве случаев, вероятно, было бы безопаснее определить класс и применить его самостоятельно:

<style>
    @font-face {
        font-family: 'thegirlnextdoor';
        src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot'); /*   IE9 Compat Modes */
        src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot? #iefix') format('embedded-opentype'), /* IE6-IE8 */      url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.woff')  format('woff'), /* Modern Browsers */
        url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.ttf')    format('truetype'), /* Safari, Android, iOS */
        url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.svg')    format('svg'); /* Legacy iOS */
    }

    .fancy-font {
        font-family: 'thegirlnextdoor', sans-serif !important;
    }
</style>

И примените его так:

<span class="fancy-font">My e-mail title</span>

Изменить

Найдя эту ссылку и просматривая ее, @font-face не поддерживается Word или Outlook. Если вы действительно хотите использовать шрифт, то вам придется установить шрифт на все компьютеры, которые могут получать электронную почту, и иметь подходящий резерв в случае, если он не установлен.

Ответ 4

Мне очень нравится Zougen Moriver. Хотя я беспокоюсь о том, что <head> лишен.

Я попытался скрыть стек шрифтов в условном выражении, но это не сработало для меня. Также не было @import. Поэтому я завернул каждый блок копии тегом шрифта следующим образом:

<span style="font-family: ProximaNova-Reg, Arial, sans-serif; font-size: 16px; color: #333333; mso-line-height-rule: exactly; line-height: 20px; text-align:left;"><font face="Arial, sans-serif;">It’s an unforgettable night of friends, thrills, memories and laughs topped off with a performance by TBD on the Music Plaza stage. No senior should miss this once-in-a-lifetime experience.</font></span>

Он работал во время тестирования.

Таким образом, если <head> когда-либо удаляется, то падение обратно в Aril остается неповрежденным.

Нижняя сторона - это утомительная работа, чтобы поместить этот <font> вокруг каждого блока копии.

Ответ 5

Мне нравится ответ Джоша Харрисона. Но нужно ли повторять это на "мобильных" контрольных точках? то есть

@media screen {  
    h1 { font-family: Merriweather,Georgia,serif !important; }
    h2 { font-family: Merriweather,arial,sans-serif !important; }
    p { font-family: Merriweather,arial,sans-serif !important; }
}

@media screen and (max-width: 660px){
    #main_table { width:92% !important; }
    h1 { font-family: Merriweather,Georgia,serif !important; }
    h2 { font-family: Merriweather,arial,sans-serif !important; }
    p { font-family: Merriweather,arial,sans-serif !important; }
}