it-swarm.com.de

Kann Outlook 2010 eine Webschrift in einer HTML-E-Mail verwenden?

Ich habe verschiedene Dinge ausprobiert, einschließlich des Einwickelns des CSS. Irgendwelche Ideen, wie Sie eine HTML-E-Mail für Outlook 2010 erstellen können, um ein Webfont und nicht standardmäßig eine vorinstallierte Schriftart zu verwenden?

Hier sind einige der Sachen, die ich ausprobiert habe:

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

Die folgende Technik erfordert keine wiederholte Verwendung bedingter Kommentare. Ich habe das ausgiebig getestet:

  1. Integrieren Sie Ihre web-sichere Schriftfamilie wie gewohnt, jedoch mit einem zusätzlichen Klassennamen auf dem Element. (Wenn Sie einen automatischen CSS-Inliner verwenden, können Sie Ihre web-sicheren Schriftarten mit dem Rest Ihrer CSS-Klasse mit dem .webfont-Klassennamen angeben.)

    <td style="font-family: arial, sans-serif;" class="webfont">Text</td>
    
  2. Überschreiben Sie im <head> die web-safe-Schriftfamilie mit Ihrem Webfont wie folgt:

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

Hinweis: Wenn Sie die Klasse .webfont in die einfache Abfrage @media screen einschließen, wird einfach verhindert, dass Outlook 07, 10 und 13 versehentlich Times New Roman anstelle Ihrer Fallback-Schriftarten verwenden. Referenz

Diese Clients zeigen die Webschriftart an:

  • Apple Mail
  • iOS Mail
  • Android 4.2 Stock Mail Client
  • Lotus Notes 8
  • Outlook 2000
  • Ausblick 2011
  • AOL Webmail (in Browsern, die @media unterstützen)

Die folgenden Outlook-Versionen erhalten Arial:

  • Ausblick 2002
  • Ausblick 2003
  • Outlook 2007 (anstelle von Times New Roman)
  • Outlook 2010 (anstelle von Times New Roman)
  • Ausblick 2013 (statt Times New Roman)

... und zahlreiche andere vorhersehbare Kunden erhalten Arial.

20
Josh Harrison

Outlook '03, '07, '10 und '13 unterstützen keine Webfonts. Outlook '00 und '11 tun dies.

Sie müssen auch auf den Fallback achten. Wenn Sie eine deklarierte Zeichensatzdeklaration oder einen Webfont in den Stapel eingeben, werden nicht unterstützte Outlook-Versionen auf Times New Roman zurückgesetzt, wobei der Schriftenstapel vollständig ignoriert wird. Nach vielen Tests scheint dies für alle Kunden die beste Lösung zu sein.

Fügen Sie dies in Ihren Header-Stil ein:

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

Verwenden Sie es so:

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

Dies sollte in Clients funktionieren, die Webfonts unterstützen, und im übrigen auf den Font-Stack zurückgreifen. Sie können Ihren äußeren Stapel auch in einem <td> deklarieren, wenn Sie möchten. 

Ja, ich weiß, Lobster ist ein hässlicher Webfont, aber zum Testen hat es gut funktioniert ...

14
John

Ich persönlich habe es nie versucht, aber da Sie die Schriftart definiert haben, würde ich Folgendes versuchen, um zu sehen, ob sie angewendet wird:

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

Wenn Sie weitere Voreinstellungen für font-family auf 'thegirlnextdoor' haben, die nicht ordnungsgemäß heruntergeladen werden, können Sie sie nach dem Hinzufügen hinzufügen, so wie ich es mit dem Hinzufügen der Sans-Serif-Schriftfamilie getan habe.

Beachten Sie, dass das Snippet bei Verwendung in einem Web-Mail-Client unerwünschte Auswirkungen haben kann. Wenn dies der Fall ist, müssen Sie den Abschnitt finden, auf den er angewendet werden soll. Wenden Sie es beispielsweise nur auf p-Tags an. In den meisten Fällen ist es wahrscheinlich am sichersten, eine Klasse zu definieren und selbst anzuwenden:

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

Und wende es so an:

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

Bearbeiten

Wenn Sie dieses link gefunden haben und einen Blick darauf werfen, wird @font-face nicht von Word oder Outlook unterstützt. Wenn Sie die Schriftart wirklich verwenden möchten, müssen Sie die Schriftart auf allen Computern installieren, die die E-Mail erhalten könnten, und einen geeigneten Fallback-Fall haben, falls sie nicht installiert ist.

0
Justin

Ich mag die Antwort von Zougen Moriver wirklich. Ich mache mir zwar Sorgen, dass der <head> entfernt wird.

Ich habe versucht, den Zeichensatzstapel in einer bedingten Anweisung zu verbergen, aber er funktionierte nicht für mich. Der @import auch nicht. Also habe ich jeden Block mit einem Font-Tag umschlossen:

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

Es hat beim Testen funktioniert.

Auf diese Weise bleibt der Rückfall auf Aril erhalten, wenn der <head> jemals entfernt wird.

Der Nachteil ist, dass es mühsam ist, diesen <font> um jeden Block der Kopie zu legen.

0
FrankDraws

Ich mag Josh Harrisons Antwort. Müssen Sie dies jedoch an mobilen Haltepunkten wiederholen? haben

@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