Pytanie Czy @ face-face działa w szablonach e-maili?


Czy istnieje sposób, w jaki mogę osadzić niestandardowe czcionki internetowe za pomocą CSS @font-face w szablonach wiadomości e-mail. To pytanie jest szczególnie związane z szablonami wiadomości e-mail w programie MailChimp, ale chciałbym również wiedzieć, czy istnieje rozwiązanie oparte na wielu przeglądarkach, które działa na wszystkich lub większości usług subskrypcji e-maili?

Rozważałem umieszczenie go w nagłówku stylu w ten sposób:

@font-face {
   src: url("http://www.remoteserver.com/fonts/font.otf");
   font-family: Font;
}

Ale obawiam się, że to drastycznie wpłynęłoby na obciążenie strony. Czy istnieje lepszy sposób?

Aktualizacja: W celu znalezienia uniwersalnego rozwiązania NIE są to czcionki Google ani czcionki, które istnieją w jakiejkolwiek bibliotece źródłowej online. 


11
2018-02-03 16:13


pochodzenie


Tylko w mailu jabłkowym - campaignmonitor.com/resources/will-it-work/webfonts - Luís P. A.
@ LuisP.A. Po przejrzeniu tej strony wydaje się, że tak naprawdę nie ma żadnej metody, nawet z @import, to jest bardzo wieloprzeskokowa i cross-klient dla czcionek internetowych w e-mailach? - JLF


Odpowiedzi:


Możesz! Ale ze wszystkimi rzeczami fajnymi w html-emailu nie będzie działać w każdym kliencie / przeglądarce.

@font-face będzie działać na iOS i (większości) domyślnych klientach Androida, Apple Mail i Outlook 2011 na komputery Mac. Wszystko inne albo pozbawia twoją całość <style> tag lub po prostu go ignoruje.

Niektóre środki ostrożności: czcionka twarz-maniaków Out of Outlook '07 -'13, więc owinąć swój CSS czcionki czcionek w swoim własnym tag stylu, w warunku MSO. Upewnij się, że używasz wszystkich rodzajów plików czcionek w swoim @font-face- otf, ttf, eot, svg, więc działa w różnych przeglądarkach. Następnie upewnij się, że masz dobre awarie, gdy próbujesz go użyć. Przynajmniej powinieneś font-family:'Custom Font',sans-serif; (lub serif).

<!--[if !mso]><!-->
<style type="text/css">
    @font-face {
    font-family: 'Custom-Font';
    font-weight: 400;
    font-style: normal;
    src: url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.svg#Customfont-Regular') format('svg'),
         url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.eot?#iefix') format('embedded-opentype'),
         url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.woff') format('woff'), 
         url('http://somethingdoodad.biz/fonts/Custom-Font-Regular.ttf')  format('truetype');
    }
</style>
<!--<![endif]-->

8
2018-02-04 20:24





Jedna jest gotcha Współdzielenie zasobów między źródłami (CORS). Przynajmniej Thunderbird musisz upewnić się, że serwer zdalny (który obsługuje czcionkę) wysyła nagłówek HTTP, taki jak:

Access-Control-Allow-Origin: *

1
2017-09-27 12:11