web-dev-qa-db-fra.com

Outlook 2010 peut-il utiliser une police Web dans un courrier électronique HTML?

J'ai essayé plusieurs choses, y compris emballer le css. Des idées sur la façon d’obtenir un e-mail HTML Outlook 2010 pour utiliser un contrôleur Web et non une police par défaut préinstallée?

Voici quelques trucs que j'ai essayés: 

    <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>
htmlcssemail
12
Matt Brown

La technique suivante ne nécessite pas l'utilisation répétitive de commentaires conditionnels. J'ai testé cela de manière approfondie:

  1. Ajoutez votre famille de polices Web sécurisée comme d'habitude, mais avec un nom de classe supplémentaire sur l'élément. (Si vous utilisez un inliner CSS automatique, vous pouvez spécifier vos polices Web avec le reste de votre CSS à l'aide du nom de classe .webfont.)

    <td style="font-family: arial, sans-serif;" class="webfont">Text</td>

  2. Dans le <head>, remplacez la famille de polices Web-safe par votre webfont comme ceci:

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

Remarque: l'encapsulation de la classe .webfont dans la simple requête @media screen empêche tout simplement Outlook 07, 10 et 13 d'utiliser par erreur Times New Roman au lieu de vos polices de secours. Référence

Ces clients affichent la police Web:

  • Apple Mail
  • courrier iOS
  • Android 4.2 Client Mail Mail
  • Lotus Notes 8
  • Outlook 2000
  • Outlook 2011
  • Webmail AOL (dans les navigateurs prenant en charge @media)

Arial est disponible dans les versions Outlook suivantes:

  • Outlook 2002
  • Outlook 2003
  • Outlook 2007 (au lieu de Times New Roman)
  • Outlook 2010 (au lieu de Times New Roman)
  • Outlook 2013 (au lieu de Times New Roman)

... et de nombreux autres clients plus prévisibles ont Arial.

20
Josh Harrison

Outlook '03, '07, '10 et '13 ne prennent pas en charge les webfonts. Outlook '00 et '11 font.

Vous devez également être conscient de la solution de rechange. Si vous insérez une déclaration de police entre guillemets ou une police Web dans la pile, les versions Outlook non prises en charge seront restaurées en Times New Roman, en ignorant complètement votre pile de polices. Après de nombreux tests, cela semble être la meilleure solution pour tous les clients.

Mettez ceci dans votre balise de style d'en-tête:

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

Utilisez-le comme ceci:

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

Cela devrait fonctionner sur les clients qui prennent en charge les polices Web et revenir normalement à la pile de polices. Vous pouvez également déclarer votre pile externe dans un <td> si vous préférez. 

Oui, je sais que Lobster est une webfont moche, mais cela a bien fonctionné pour les tests ...

14
John

Personnellement, je n’ai jamais essayé de le faire, mais puisque vous avez défini le caractère de la police, j’essaierais ce qui suit pour voir s’il sera appliqué:

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

Si vous ne parvenez pas à télécharger correctement le font-family sur 'thegirlnextdoor', vous pouvez l'ajouter après, comme je l'ai fait en ajoutant la famille de polices sans-serif.

Notez que si vous l'utilisez dans un client de messagerie Web, l'extrait de code peut avoir des effets indésirables. Si tel est le cas, vous devrez trouver la section à laquelle l'appliquer. Par exemple, appliquez-le uniquement aux balises p. Dans la plupart des cas, il serait probablement plus sûr de définir une classe et de l'appliquer vous-même:

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

Et appliquez-le comme suit:

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

Modifier

Lorsqu’il trouve link et jette un coup d’œil sur lui, @font-face n’est pas pris en charge par Word ou Outlook. Si vous voulez vraiment utiliser la police, vous devrez probablement l’installer sur tous les ordinateurs susceptibles de recevoir le courrier électronique et d’avoir une solution de secours appropriée au cas où elle ne serait pas installée.

0
Justin

J'aime beaucoup la réponse de Zougen Moriver. Bien que je m'inquiète de la <head> être dépouillé.

J'ai essayé de cacher la pile de polices dans une instruction conditionnelle, mais cela n'a pas fonctionné pour moi. Le @import non plus. J'ai donc enveloppé chaque bloc de copie avec une étiquette de police comme ceci:

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

Cela a fonctionné pendant les tests.

De cette façon, si le <head> est effacé, le retour à Aril reste intact.

L'inconvénient est qu'il est fastidieux de placer ce <font> autour de chaque bloc de copie.

0
FrankDraws

J'aime la réponse de Josh Harrison. Mais devez-vous répéter cette opération sur les points d'arrêt «mobiles»? c'est-à-dire

@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; }
}
0
user2991837