盡管在瀏覽器上工作的時事通訊（GMAIL、Yahoo Mail、Outlook、Hotmail 等）中，Web 字體無法應用

Question

我有一個時事通訊，我使用網絡字體Proxima Nova Extra Bold和Proxima Nova Alt Regular 。 當我在瀏覽器上打開時事通訊布局時，所有文本的字體看起來都很好。 但是當在 Gmail 或 Yahoo 或其他郵件客戶端中打開相同的時事通訊時，字體不會應用於文本。

瀏覽器布局截圖（字體看起來很完美）：

Gmail 布局截圖（未采用字體）：

這是我將字體應用於通訊文件的方式：Inside <head> Tag：

<style type="text/css">
@import url("http://serverdomainname/emailtemplatefonts.css");
body{font-family:ProximaNova-AltRegular !important;}
        </style>

通過內聯 css 進行樣式設置

<span style="padding:25px;text-align:center;display:block;font-size:14px;font-family:ProximaNova-AltRegular">Discover attractions, restaurants, nightlife, and accomodations around the world. Use specialized filters in your search to find free museums, family friendly restaurants, weird and wonderful hotels, and much more. </span>

這是包含的字體文件的css：

@font-face {font-family: 'ProximaNova-AltRegular';
font-weight: normal;font-style: normal;
src: url('http://sitedomain.com/assets/fonts/proxima_nova_alt/ProximaNovaAltRegular.woff2') format('woff2');}



@font-face {font-family: 'ProximaNova-Extrabold';
font-weight: normal;font-style: normal;
src: url('http://sitedomain.com/assets/fonts/proxima_nova_bold/ProximaNovaExtrabold.woff2') format('woff2');}

Answer 1

許多電子郵件客戶端不支持 Web 字體。 即使他們這樣做了，您也必須跳過很多圈，例如在head和body之間移動style標簽。

以下是對各種電子郵件客戶端的 Web 字體支持的摘要：

https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts/

准備好一些黑客並考慮退回到標准字體（但不喜歡使用圖像，因為這對您的電子郵件的可訪問性造成了限制）。

Answer 2

Gmail 和其他電子郵件客戶端將刪除 HTML 中的<style>標記。 我不知道有什么辦法可以解決這個問題。 不幸的是，如果您想/需要為標題或其他方式使用自定義字體，最可靠的方法是插入字體圖像。

Answer 3

大多數電子郵件客戶端不支持網絡字體，也沒有流行的網絡郵件服務支持。 即使您引用的是 Proxima Nova，您在 Gmail/Yahoo 中實際看到的字體也是默認系統 sans-serif（因為您的字體堆棧中沒有后備字體）

電子郵件客戶端中的 Web 字體支持不是很好，因此后備系統字體很重要。 您可以使用<link href=''>標簽而不是@import來引用網絡字體，以稍微增加您的覆蓋范圍。

盡管在瀏覽器上工作的時事通訊（GMAIL、Yahoo Mail、Outlook、Hotmail 等）中，Web 字體無法應用

問題描述

3 個解決方案

解決方案1
3 已采納 2016-06-22 14:51:43

解決方案2
1 2016-06-22 14:44:05

解決方案3
0 2016-06-24 13:02:26

盡管在瀏覽器上工作的時事通訊（GMAIL、Yahoo Mail、Outlook、Hotmail 等）中，Web 字體無法應用

問題描述

3 個解決方案

解決方案1 3 已采納 2016-06-22 14:51:43

解決方案2 1 2016-06-22 14:44:05

解決方案3 0 2016-06-24 13:02:26

解決方案1
3 已采納 2016-06-22 14:51:43

解決方案2
1 2016-06-22 14:44:05

解決方案3
0 2016-06-24 13:02:26