網絡字體：如何使它們在電子郵件中完美運行

已發表: 2021-04-24

從我的科學研究中（我觀察了我女兒在過去一年開始寫報告時的情況），我了解到人們開始玩的第一個設計方面是排版。當您第一次開始編寫報告時，您會花費數小時試圖找出最適合使用的字體。好吧，也許不是幾個小時，但大多數人會花一些時間在上面。因為，正如大品牌所知，排版很重要。這在電子郵件中很重要。

但可訪問性也很重要。因此，不要將您的信息困在圖像中，而是開始使用帶有網絡安全字體和網絡字體的實時文本。畢竟，不依賴於圖像並且可以被更廣泛的受眾閱讀的文本會帶來出色的訂閱者體驗。作為您的最佳客戶——每投資 1 美元，電子郵件會返回 36 美元——這對您的整體營銷策略非常有用。

在這篇博文中，我將分解：

網絡字體與網絡安全字體
網頁字體的好處
電子郵件客戶端支持和許可
在哪裡可以找到網絡字體
將它們編碼成電子郵件
電子郵件中 Web 字體的絕佳示例

網絡字體與網絡安全字體

您可以通過兩種不同的方式製作實時文本：網絡安全字體和網絡字體。雖然聽起來一樣，但還是有一定的區別的。為了理解這些差異，讓我們來看看字體在您的電子郵件中是如何工作的。

當你的電子郵件被編碼時，字體是使用一個名為 font-family 的 CSS 屬性來聲明的。這個 font-family 屬性可以只有一個字體名稱或多個字體名稱——通常稱為字體堆棧。包含多個字體名稱可確保如果一種字體不起作用，則有您選擇的後備或備用字體。在不列出多個字體名稱的情況下，電子郵件客戶端可以決定您的備份字體。當您的訂閱者打開您的電子郵件時，瀏覽器會讀取 font-family 屬性並拉入要使用的字體。

網頁安全字體

使用 Web 安全字體，瀏覽器會從本地字體目錄中提取字體。這意味著這些字體已經安裝在您的計算機上。所有計算機都預裝了字體，這些被認為是網絡安全的。他們是安全的使用，因為有一個很好的機會，你的用戶已經將有他們。

缺點是與網絡字體相比，網絡安全字體的數量有限。而且它們使用非常頻繁，因此您不太可能脫穎而出（如果這就是您的目標）。

明顯的網絡安全字體是：

宋體
黑體字
韋爾達納
喬治亞州
英語字體格式一種

但是，您可以放心使用其他幾種方法。因此，擺脫標準的 Arial 或 Helvetica 字體循環，找到適合您品牌的網絡安全字體。

我發現的網絡安全字體的最佳資源是 CSS 字體。我喜歡它們包含每種字體在 PC 和 Mac 上的使用百分比，因此您可以大致了解有多少訂閱者可能會看到您想要的字體，以及有多少會看到您的後備字體。

網頁字體

Web 字體是從服務器中提取的——無論是您自己託管的還是外部的（例如 Google 或 Adobe）。正因為如此，可以使用的字體種類要多得多，而且它們可以在任何計算機上使用……只要瀏覽器或電子郵件客戶端可以將字體拉進來。在某些情況下，您的訂閱者可能已經擁有一個網絡字體下載並安裝在他們的機器上，因此即使在不支持網絡字體的電子郵件客戶端中，這些字體也可以使用！

因此，雖然網絡字體為您提供了更多的多樣性和創作自由，但它們確實是有代價的：有限的電子郵件客戶端支持（我更深入地研究）。

為什麼是網頁字體？

所以你可能想知道，為什麼要費心使用網絡字體？作為營銷人員和設計師，您知道在電子郵件中使用顏色、設計和（是的）排版保持品牌形象的壓力。 Web 字體可讓您炫耀您的品牌，而無需依賴圖片作為文本。

鎖定圖像中的重要副本一直是電子郵件設計的標準做法，作為保持品牌和創造力的一種方式。但是“隱藏”圖像中的文本會限制電子郵件的可訪問性，因為屏幕閱讀器無法閱讀圖像上的文本。

Ace Hardware 電子郵件示例，包含和不包含圖像的 Web 字體 — 使用網絡字體時帶有和不帶有圖像的電子郵件

帶有和不帶有圖像的 Web 字體的 Magic Spoon 電子郵件示例 — 在圖像中使用文本時使用和不使用圖像的電子郵件

而且，如果默認情況下關閉圖像，則圖像中的文本會損害訂閱者的體驗。這可能不是您訂閱者的很大一部分，但真的無法知道是否有人關閉了他們的圖像並打開了您的電子郵件。那麼為什麼不為最廣泛的受眾提供最佳體驗呢？

Web 字體開闢了排版創意的新途徑，使電子郵件設計人員能夠富有創意且易於訪問，並堅持其品牌的外觀和感覺。

我可以在電子郵件中使用網絡字體嗎？

如果你還沒有猜到，答案是肯定的！但是——就像在電子郵件中一樣——有一些警告。

電子郵件客戶端支持

Web 字體僅適用於某些電子郵件客戶端，必須注意確保在不支持它們的地方，字體優雅地回退。

電子郵件客戶端	網頁字體支持
蘋果郵箱	✓ 是
展望 2007-2016	✘ 否
展望 2019	✘ 否*
Mac 版 Outlook	✓ 是
展望辦公室 365	✘ 否*
Gmail 應用程序	✘ 否*
IOS	✓ 是
展望應用	✘ 否
三星郵箱	✘ 否*
美國在線郵件	✘ 否
Gmail	✘ 否*
辦公室 365	✘ 否
展望網	✘ 否
雅虎！郵件	✘ 否

*根據電子郵件嵌入方法，有一些不穩定的結果，稍後討論。

值得一看您的訂閱者群，看看有多少人在支持 Web 字體的電子郵件客戶端中查看您的電子郵件。如果您的訂閱者足夠多，那麼這是一種讓您的電子郵件更上一層樓的絕妙方式。

如果大多數都不是，那麼您的時間和精力根本不值得，特別是如果您正在考慮使用付費網絡字體。

您的訂閱者使用哪些電子郵件客戶端？

使用 Litmus 電子郵件分析了解您的訂閱者在哪裡打開您的電子郵件以及他們如何參與。獲取優化電子郵件及其他所需的見解。

了解更多 →

許可

Web 字體最初設計為僅在網站上使用，因此其許可通常僅用於網站和移動應用程序。許多網絡字體服務不允許在電子郵件中使用的原因是因為它被視為分發字體，這違反了許多服務的最終用戶許可協議 (EULA)。

我們聯繫的所有網絡字體提供商都支持在電子郵件中使用他們的字體。每個提供商都需要不同的許可證，因此在電子郵件中沒有標準的字體許可方式。如果您想使用某種字體，請聯繫該公司以確切了解他們如何獲得字體許可。

在哪裡可以找到網絡字體

所以你已經考慮了一切，並決定嘗試使用網絡字體。通過看似無窮無盡的選擇，您可以找到適合您品牌的選擇。但記住可訪問性也很重要。

有些字體比其他字體更容易閱讀。

華麗的或裝飾性的字體，例如顯示字體或手寫字體，會使有視覺障礙或閱讀障礙的人難以區分字母形狀。無襯線字體（字體中沒有擴展特徵或字母捲曲的字體，例如 Arial、Calibri、Century Gothic 或 Helvetica）和平板字體（具有較粗線條的字體，例如 Museo Slab 和 Rockwell）被認為更易於訪問。

以下是一些可以開始尋找的好地方。

谷歌字體

有大量的網絡字體服務可用，但 Google Fonts 是我們的最愛。該服務是完全免費的，如果您在 Adobe Photoshop、Sketch 或其他設計軟件中模擬設計，您可以將網絡字體下載到您的計算機上。

Adobe 字體

自 2018 年 10 月起，Typekit 已成為 Adobe Fonts。它們現在支持 <link> 和 @import 方法以將字體用作網絡字體（接下來會詳細介紹）。該服務不是完全免費的，但如果您已經訂閱了任何 Creative Cloud，它就會包含在其中。

網頁字體服務

還有其他幾種付費的網絡字體服務。您需要確保獲得正確的許可才能在電子郵件中使用它們。

類型網絡（網絡許可）
工藝類型代工（Web 許可）
Optimo（數字廣告許可證）
Fontspring（自定義電子郵件許可證）
Typotheque（網絡許可）
製作類型（網絡廣告許可證）
MyFonts（網絡許可）
商業類型（網絡許可）

使用 Web 許可證，您可以選擇自己託管字體或由提供商託管字體。在某些 Web 許可證中，您為每封加載字體的電子郵件支付一定數量的頁面瀏覽量，因此請確保在購買許可證時考慮到這一點。

如何在電子郵件中嵌入網絡字體

由於網絡字體通常不會在某人的本地設備上找到，而是託管在其他地方，因此您必須先將網絡字體“嵌入”或導入電子郵件中，然後才能實際使用它們。

1. 獲取字體文件的 URL

您需要網絡字體的 URL 才能將其調用到您的電子郵件中。您的網絡字體服務應該有這個 URL。但是，如果您自己託管字體文件，請從網絡字體在您的服務器上的位置獲取 URL。確保它是一個公共 URL，而不是來自本地服務器。否則，您的訂閱者將無法訪問網絡字體，而是會看到後備字體。

如果您使用的是 Google Fonts，找到 URL 會有點棘手，但也不是太難。了解下一步如何使用 @font-face 嵌入方法。

2. 使用三種方法之一導入網頁字體

在電子郵件中嵌入 Web 字體有三種方法（以及一個可能限制您可以使用的方法的警告）。嵌入字體的三種方法是：

<鏈接>
@進口
@字體臉

那麼你為什麼要選擇一種方法而不是另一種方法呢？

@import 方法推遲加載正在導入的 web 字體，直到它嵌入的 HTML 完全加載。這可能會導致您的網絡字體需要更長時間才能出現在您的電子郵件中，而電子郵件的其餘部分則被加載。相反，<link> 方法在讀取 HTML 文件的代碼時內聯加載資源（從上到下），如果您的 Web 字體文件特別大，這可能會延遲您的電子郵件的加載。

選擇要使用的方法時要記住的另一件事是您的 ESP 支持什麼。

您可以編寫出整天在 Litmus 中運行的漂亮代碼，但是如果您的 ESP 更改了您的代碼，正如我們知道的大多數人所做的那樣，那麼您所做的一切都將無關緊要。確保您的 ESP 不會以導致字體停止工作的方式更改您的代碼。在 Litmus，我們的 ESP 不允許我們在樣式元素周圍包含 MSO 條件。所以 <link> 和 @import 方法對我們不起作用，因為它們在 Outlook 中沒有得到很好的支持，我們將在下面進一步討論。

使用 <link>

使用 <link> 方法是一種在電子郵件中嵌入字體的相對簡單的方法。將此行代碼放在電子郵件的 <head> 中，靠近頂部：

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

使用@import

@import 方法也是一個比較簡單的方法。將此行代碼放在電子郵件的 <head> 標籤之間的 <style> 中：

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

使用@font-face

在線 Web 字體服務通常提供五種文件格式可供選擇：.eot、.woff、.woff2、.svg 和 .ttf。 .woff 和 .woff2 格式對電子郵件的支持最好，因此我們建議您盡可能使用這兩種格式中的一種或兩種。 @font-face 方法是唯一允許您專門選擇要導入的文件格式的方法，使其成為實現 Web 字體的最可靠的方法。

這是使用 Google Fonts 作為我們選擇的網絡字體服務將網絡字體導入電子郵件的典型 @font-face 聲明：

@font-face {
  	font-family: 'Roboto';
  	font-style: normal;
  	font-weight: 400;
  	src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
	}

如果您使用的是 Google 字體，找到 @font-face 代碼並不是最簡單的，但也不是太難。

首先，您必須在 Google Font 上找到您想使用的字體。然後，選擇您要使用的樣式。彈出菜單將出現在右側。

googe_fonts

在彈出窗口中，可以選擇 <link> 或 @import。這兩個都將有一個 URL（在上面的屏幕截圖中突出顯示）。您可以復制該 URL 並將其粘貼到瀏覽器的地址欄中，以找到 Google 使用的 CSS 樣式表。

google_font_api

在 <style> 標籤之間複製並粘貼@font-face 的“拉丁”版本。

在 Litmus，@font-face 方法是我們將 Web 字體導入電子郵件的首選實現。

這種導入 Web 字體的方法的全部功勞歸功於電子郵件可訪問性倡導者 Paul Airy，如過去的 Type: E 通訊中所述。

3.選擇正確的後備字體

使用 Web 字體時，有必要為那些不支持 Web 字體的電子郵件客戶端提供後備 Web 安全字體。

如果字體系列堆棧中列出的字體不可用，則每個電子郵件客戶端都有一個默認字體。例如，Gmail 使用 Arial，Apple Mail 使用 Helvetica，Outlook 使用 Times New Roman。如果您不喜歡這些默認字體中的任何一種的聲音，我們有一些好消息 - 您可以在字體系列堆棧中編碼時選擇備用字體（在下一步中）。

選擇能夠保留電子郵件設計的正確後備字體是為所有訂閱者提供出色體驗的關鍵，無論他們使用哪種電子郵件客戶端。

後備字體應與網絡字體類型相同——如果您的網絡字體是無襯線字體，則使用 sans-serif 後備字體，如果您的網絡字體也是襯線字體，則使用 serif 後備字體。使用相同的字體樣式將有助於在不同的電子郵件客戶端中保留電子郵件的設計。

您可以通過分析字體的 x 高度來更進一步。

x-height 是字體的垂直高度。理想情況下，您應該選擇具有相似 x 高度的後備字體，以防止您的電子郵件設計在使用後備字體時分崩離析。

比較 verdana、arial 和 proxima nova 的 x 高度示例

下面是字體 Verdana、Arial 和網絡字體 Proxima Nova 之間 x 高度細微差異的示例。當 Web 字體未呈現時，這些細微的差異可能會對您的電子郵件設計的製作或破壞產生重大影響。

4. 在電子郵件中使用您的字體

一旦您的網絡字體被導入並選擇了您的後備，在電子郵件中使用它們就像使用網絡安全字體一樣簡單。只需使用導入方法中定義的字體系列名稱，然後在 CSS 內聯或頭部使用您的後備字體：

font-family: 'Roboto', Verdana, sans-serif;

將此視為首選字體的優先列表。如果電子郵件客戶端無法滿足您的第一選擇，它將退回到您列表中的下一個。

例如，使用上述字體系列堆棧，Gmail 將忽略列表中的第一個字體，因為它是 Gmail 不支持的網絡字體。所以渲染的字體將是 Verdana。如果所使用的設備不支持 Verdana（這種情況非常罕見，因為 Verdana 是一種網絡安全字體），設備將為其係統使用默認的 sans-serif 字體，因為這是列表中的第三種字體。

5. 避免假粗體或假斜體

如果您的網絡字體文件隨附有粗體和斜體版本，那麼讓我們使用它們吧！

字體設計師花了很多心思和努力使字體的所有不同樣式恰到好處，因此最好的做法是應用原始字體設計，而不是讓電子郵件客戶端或瀏覽器隨意地將仿粗體或仿斜體應用到常規字體。

基本上，不要這樣做：

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}
style="font-family: 'Roboto', Verdana, sans-serif; font-weight: bold; font-style: italic;"

像網頁設計一樣，您可以通過在@font-face 堆棧中包含這些樣式來引入真正的字體，如下所示：

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto-Italic'), 
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOkCnqEu92Fr1Mu51xIIzIXKMny.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto-Bold'), 
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto-BoldItalic'),   src: url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format('woff2');
}

如您所見，無論字體系列如何，不同的樣式都會引入不同的字體。這樣，如果您在 HTML 中設置字體樣式，如下所示：

style="font-family: 'Roboto', Verdana, sans-serif; font-weight: bold; font-style: italic;"

...然後它會引入真正的“Roboto-BoldItalic”字體！ 同樣，只需添加 font-weight: bold; 將拉入'Roboto-Bold'並添加font-style: italic; 將拉入'Roboto-Italic' 。

也不要這樣做！

所以，您可能想知道 - 為什麼要這樣做而不是為每種樣式聲明不同的字體系列，這也會引入真正的字體？這是它的樣子：

@font-face {
font-family: 'Roboto Bold Italic';
src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v27/KFOjCnqEu92Fr1Mu51TzBic6CsTYl4BO.woff2) format('woff2');
}
style="font-family: 'Roboto Bold Italic', Verdana, sans-serif;"

這提出了一個問題。使用 font-family 名稱來存儲樣式不僅會創建過於復雜和冗餘的 CSS，而且如果您的回退開始，它還會剝離您的文本樣式。例如，如果您正在 Gmail 中查看上述代碼（它不會t支持自定義網絡字體），那麼您將只會看到未加粗、未斜體的Verdana而不是Roboto Bold Italic 。

通過將您的字體系列和您的字體粗細或字體樣式分開，您的後備字體仍將保留正確的樣式。

6. 使用 Outlook 修復程序

Outlook 有一個奇妙的怪癖，您需要注意。特別是如果這是您的許多訂閱者使用的。

查看您的電子郵件在 Outlook 等中的外觀

每個電子郵件客戶端都有其怪癖。幸運的是，您可以在點擊發送之前在電子郵件中看到它們 - 使用 Litmus 電子郵件預覽。不再有損壞的電子郵件。

了解如何 →

如果您使用 <link> 或 @import 方法，則 Outlook 2019 之前的所有內容都將顯示 Times New Roman，無論您為字體設置了什麼後備。

對此最簡單的解決方法是使用 @font-face 方法。但是，如果您需要使用 <link> 或 @import 方法，請使用 Microsoft Office (MSO) 條件來註釋掉樣式的該部分。這將使 Outlook 無法看到這些，並且會按預期使用您的後備字體：

沒有 MSO 條件	使用 MSO 條件
`<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">`	`<!--[if (gte mso 9)\|(IE)]><!--> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <!--<![endif]-->`

但是等一下。我剛剛說了 Outlook 2019之前的所有內容。那麼 Outlook 2019（和 Outlook Office 365）會發生什麼？好吧，在這些電子郵件客戶端中，即使沒有 MSO 條件，Outlook 也會回退到您的回退。

沒有 MSO 條件	使用 MSO 條件
`< link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">`	`<!--[if (gte mso 9)\|(IE)]><!--> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <!--<![endif]-->`

事實上，在這些客戶端中，@import 似乎確實有效！但真的嗎？我們嘗試了其他字體，結果與您對 Outlook 的期望大致相同：

在 Outlook 中測試 Web 字體

看起來有時它會放入系統字體而不是您指定的字體。就蒙特塞拉特而言，我不太確定那裡發生了什麼，但那不是蒙特塞拉特。它實際上看起來更像拉托。因此，Outlook 似乎正在嘗試支持 Web 字體，但還沒有完全實現。這絕對是未來需要注意的事情。

與此同時，由於上述原因——並且因為你不能只針對 Outlook 2019——最好使用 @font-face 或隱藏你的 <link> 或 @import 聲明。

如果您發現 Outlook 將您的字體轉換為 Times New Roman，您可以添加mso-font-alt: 'Arial'; 到 @font-face 塊以提供 Outlook 的替代回退：

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  mso-font-alt: 'Arial';
  src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}

您可以使用的另一個解決方案是使用內聯的網絡安全字體堆棧對字體系列進行編碼，並包括一個 <style> 塊以使用網絡字體覆蓋字體。然後只需從 Outlook 中隱藏該樣式塊即可：

<!--[if (gte mso 9)|(IE)]><!-->
 p, h1, h2, h3, h4 { font-family: 'Roboto', Verdana, Helvetica, sans-serif !important; }
<!--<![endif]-->
style="font-family: Verdana, Helvetica, sans-serif;"

7. 也使用 Gmail 的修復程序（開玩笑，沒有）

所以您可能想知道，“Gmail 怎麼樣？畢竟我們正在使用谷歌字體。”

您可能認為 Gmail 是 Google 的產品，而 Google Fonts 是 Google 的產品，它們可以很好地配合使用。但可惜，事實並非如此。

即使 Web 字體是 Google 字體並且即使您使用 Google 提供的代碼，它們也無法在 Gmail 中使用。對此的一個例外是 Roboto：

使用不同的 Google 字體	使用不同的嵌入方法

事實上，在 Android 上的 Gmail 郵件應用程序上，所有無襯線字體都回退到 Roboto：

使用不同的 Google 字體	使用不同的嵌入方法

一些幫助您入門的靈感

好的，現在誰準備好看到幾個很棒的品牌示例，它們以正確的方式在電子郵件中使用網絡字體？

Ace Hardware 在支持 Web 字體的地方使用了它們，但選擇 Rockwell 作為備用平板字體，以確保電子郵件在其他電子郵件客戶端中仍然具有品牌特色。

使用網頁字體	有後備

Webflow 使用系統字體作為其 Web 字體的後備，並使用字體粗細來確保無論出現什麼字體都能獲得出色的排版體驗。

網絡流電子郵件

保持品牌和無差錯

Web 字體是一種很好的方式，可以讓您的電子郵件中的文本既具有品牌特色又易於訪問。但正如您從這篇文章中看到的，有很多細微差別需要考慮。這就是為什麼同樣重要的是……

一直在測試！

我們已盡最大努力測試了一系列不同的情況，但您的 ESP 可能會以意想不到的方式扭曲您的代碼。確保在發送電子郵件之前測試您的電子郵件，以確保您的所有回退都正常工作。

QA 測試電子郵件中的網絡字體

你做對了嗎？通過免費試用 Litmus 找出答案。預覽您的電子郵件在 90 多個電子郵件客戶端、應用程序和設備中的外觀。並通過完美的電子郵件維護您的品牌聲譽。

開始免費試用 Litmus →

添加 Web 字體作為一項出色的漸進增強功能是值得的，可幫助您在收件箱中為訂閱者提供最佳體驗。玩得開心！如果您有任何問題或意見，請在下方告訴我們。

最初由吉安娜·米斯特里 (Jaina Mistry) 於 2019 年 4 月 11 日發表。 最後更新於 2021 年 4 月 23 日。