Problemy z zastępowaniem stosu czcionek CSS w Outlooku podczas korzystania z Google Webfonts

Question

Używanie Google Webfonts w wiadomościach e-mail Wcześniej wystąpiły problemy z zastępowaniem czcionek w Outlooku (2007,2010 itp.), Które nie wystąpiły przed włączeniem webfontów. Ignoruje to stosy czcionek i przechodzi w prawo do Times.

Dzieje się tak, mimo stosowania stosów czcionek zastępczych inline.

Zauważyłem podobne problemy, które zostały zamieszczone tutaj wcześniej, ale tylko jako ogólne pytanie, niezwiązane z korzystaniem z webfontów. Poprzednio wszystkie awarie czcionek działały poprawnie. Używam Litmusa do przeprowadzenia testowania wiadomości e-mail.

Czy ktoś wie, dlaczego tak się dzieje?

Link do Litmus: https://litmus.com/pub/53a33c7/screenshots

Początkowo związany czcionek w CSS tak:

<link href='http://fonts.googleapis.com/css?family=Arvo|Droid+Serif:400,700,400italic,700italic|Roboto:300' rel='stylesheet' type='text/css'> 

Próbowałem też za pomocą @ font-face i samo gospodarzem pliki po obejrzeniu możliwy solution in another answer, ale nie zrobił” t praca (I zaktualizowane nazwy klas zbyt):

wyjątkiem od font-face usiłowanie obejścia:

<!--[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]--> 

Wydaje się, że działanie CSS w programie Outlook działa, ale występują problemy z priorytetem. Nie wierzę, że program Outlook rozpoznaje ważną deklarację, więc pracowałem nad bardziej szczegółowymi wyborami. Jednak nadal nie rozumiem, dlaczego tak się dzieje i czy jest prostsza naprawa.

Outlook Font Override Fragment:

<!--[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]--> 

Przykład kodu problematycznej:

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

Próbowałem sugestia w odpowiedzi umieścić kod import webfont wewnątrz tagi warunkowe, które wykluczają program Outlook bezskutecznie.

<!--[if !mso]><!-- --> 
@import url(http://www.example.css); 
<!--<![endif]--> 

I

<!--[if !mso]><!-- --> 
@import url(http://fonts.googleapis.com/css?family=Oxygen); 
<!--<![endif]--> 

UPDATE II (roztwór):

Z wszelką pomoc oferowana jest jasne szereg pozornie drobny problem wszystko może być przyczyną tego problemu. Wydaje się, że metoda "twarze-czcionki" jest lepsza niż @import. Posiadanie nazwy webfontu nie będzie takie samo jak lokalna czcionka może powodować ten sam problem, ale to nie jest to, co działo się z tym konkretnym e-mailem.

Próbowałem wcześniej kod warunkowy, aby ukryć kod importu WebFont z Outlooka <!--[if !mso]><!--> w ogóle.

Problem polegał na tym, że zrobiłem to w tagu stylu CSS w sekcji head. Po prostu umieszczenie tego kodu we własnym tagu stylu, jak pokazano poniżej, zrobiło różnicę.

Potwierdziłem, że działa, ponieważ udało mi się usunąć dodatkowy kod CSS obejścia, którego użyłem do wykrycia wersji programu Outlook 2007 i nowszych, aby przywrócić wartości h1, h2 do standardowego stosu czcionek.

<!--[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]--> 

Answer 1

UPDATE: Here is a technique zadzwonić Czcionki Webfonts z przełączenie na stosie czcionki we wszystkich wersjach Outlook, które rozkładają

Spróbuj deklarując swoją webfont jeśli nie Outlook zamiast. Webfont może być problematyczny dla Outlooka, więc nie będzie go w ogóle dzwoniło. Warto spróbować ...

Edit:

Ten problem ma occured before z Outlook łamanie gdy pierwszy zadeklarował czcionka jest w cudzysłowie. Wygląda na to, że błąd/ograniczenie programu Outlook jest niestety nieuniknione.

Answer 2

Pamiętam, że miałem podobny problem z powrotem. W końcu myślę, że to było @import powodujące problem i musiałem użyć innej metody, aby pobrać czcionki.

Zamiast korzystać z metody @import należy użyć metody @font-face.

@font-face { 
    font-family: 'Oxygen'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Oxygen'), local('Oxygen-Regular'),  url(http://themes.googleusercontent.com/static/fonts/oxygen/v2/eAWT4YudG0otf3rlsJD6zOvvDin1pK8aKteLpeZ5c0A.woff) format('woff'); 
} 

Następnie użyj czcionki tak jak zwykle:

h1 { 
    font-family: 'Oxygen', sans-serif; 
} 

Answer 3

Problem jest prawdopodobnie występujące ponieważ użytkownik ma zainstalowane lokalnie wersji czcionek i istnieje konflikt.

Spróbuj @ font-face import (tak działa Google WebFonts) i po prostu zmień nazwę rodziny czcionek na coś innego.

E.g.

@font-face { 
    font-family: 'droid_serif'; 

do:

@font-face { 
    font-family: 'droid_serif_alt'; 

Pamiętaj, aby odzwierciedlić zmiany w pozostałej części znaczników!

Answer 4

Mam również ten problem i znalazłem prostą naprawę. Po zaimportowaniu czcionki internetowej ekran {} @media może być używany do wydzielania klientów obsługujących zapytania o media, a te są tymi, które obsługują czcionki internetowe. Dlatego po prostu określając deklarację rodziny czcionek wewnątrz i na zewnątrz tego selektora, można ukryć określone czcionki od klientów poczty e-mail, takich jak Outlook, aby wyświetlić następną odpowiednią czcionkę zastępczą, a czcionka internetowa będzie wyglądać ładnie w klientach obsługujących tę funkcję. to.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300); 

.h1 { font-family: 'Arial', 'Helvetica', sans-serif } 

@media screen { 
    .h1 { 
     font-family: Open Sans, 'Arial', 'Helvetica', sans-serif 
    } 
} 

Nawiasem mówiąc, Campaign Monitor suggests że @import jest lepsza niż @ font-face w wiadomości e-mail w ogóle.

Answer 5

Aby Outlook używał stosu czcionek zamiast zastępować czcionkę internetową dowolną czcionką wybraną przez program Outlook, dodaj komentarz warunkowy, który będzie czytany przez program Outlook tylko w celu przypisania czcionek zapasowych stosu czcionek. Zdefiniuj swoją czcionkę internetową, ale nie określaj jej w komentarzu warunkowym, aby program Outlook zignorował czcionkę internetową, przejdź bezpośrednio do komentarza warunkowego i po prostu wyświetl Arial.

<style> 
     @import url('http://www.yourdomain.com/webfont.css'); 
</style> 

    <!--[if gte mso 9]> 
     <style> 
      .webfontsubstitute { font-family: arial, sans-serif; } 
     </style> 
    <![endif]--> 

</head> 
<body> 

    <a href="#" target="_blank" style="font-family:superwebfont,arial,sans-serif;"> 
    <span class="webfontsubstitute">WEB FONT STYLED TEXT HERE</span></a> 

Answer 6

Dokąd zmierza ten CSS? Czy już idzie w nagłówku?

Answer 7

musiał użyć "mso-font-alt" dla Font-Fallback (Outlook 2010,2013,2016):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 

    .... 

    <style type="text/css"> 

    @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; 
     mso-font-alt: 'Arial'; 
    } 

    ... 

    </style> 
</head> 

Kolejny trik, aby zastąpić niestandardowe deklaracje CSS:

<!--[if mso]> 
    <style> 
     body,table tr,table td,table th,a,span,table.MsoNormalTable { 
     font-family: 'Arial', 'Helvetica', 'sans-serif' !important; 
     } 
     .custom-headline{ 
      font-family: 'Times New Roman', 'serif' !important; 
     } 
    </style> 
<![endif]--> 

Proszę również zapoznać się z: https://litmus.com/community/code/36-outlook-and-fallback-fonts