電子郵件安全字體和 HTML 電子郵件字體最佳實踐
你們都聽過我對多年來電子郵件支援缺乏進步的抱怨,所以我不會花(太多)時間抱怨它。我只希望一個大型電子郵件用戶端(應用程式或瀏覽器)能夠脫穎而出並嘗試完全支援最新版本 HTML 和 的CSS。我毫不懷疑公司正在花費數千萬美元來微調他們的電子郵件。
這就是為什麼擁有像 Uplers 這樣的公司在電子郵件設計的各個方面都處於領先地位真是太棒了。在這個最新的資訊圖表中,團隊將引導您了解排版以及如何部署不同的字體及其特徵來自訂您的電子郵件。
在電子郵件中使用自訂字體
由於電子郵件用戶端的支援不同,使用外部字體可能比標準網頁設計更具挑戰性。但是,仍然可以將外部字體合併到支援外部字體的客戶的電子郵件中,同時為不支援外部字體的客戶提供後備字體。
60% 的電子郵件用戶端現在支援電子郵件設計中使用的自訂字體,包括AOL Mail、本機Android 郵件應用程式(不是Gmail)、Apple Mail、iOS Mail、Outlook 200、Outlook.com 和基於Safari 的電子郵件。
上流人
A 後備 字體是電子郵件用戶端在無法呈現主要(外部)字體時可以顯示的備用字體。這可確保您的電子郵件在不同的檢視環境中保持可讀並盡可能保持其預期外觀。
- 選擇您的外在字體:選擇您要使用的外部字體。這可能來自 Google Fonts 等服務或您的網站伺服器上託管的字體。
- 在您的電子郵件 HTML 中包含字體:對於支援它的電子郵件用戶端,您將連結到外部字體
<head>
您的電子郵件 HTML。但是,出於安全原因,許多電子郵件用戶端不允許連結到外部資源。相反,您可以將字體作為連結包含在內,希望允許外部連結的網頁郵件用戶端能夠呈現它。 - 指定後備字體:選擇外觀與外部字體相似的網路安全後備字體。這些應該是大多數設備和作業系統上預先安裝的通用字體系列。
- 使用內聯 CSS 進行樣式定義:由於許多電子郵件用戶端中的 CSS 支援有限,最佳實踐是使用內聯 CSS 來定義樣式,包括字體系列。
示例:
假設您想使用外部字體 開放三世 來自 Google 字體,以 Arial 和 sans-serif 作為後備。您可以嘗試以下方法:
<!DOCTYPE html>
<html>
<head>
<title>Email with External Font</title>
<!-- Attempt to include external font - not supported by all email clients -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<div style="font-family: 'Open Sans', Arial, sans-serif; font-size: 16px;">
Hello, this is a sample text using Open Sans, with Arial and sans-serif as fallbacks.
</div>
</body>
</html>
重要注意事項:
- 電子郵件用戶端支援:許多電子郵件用戶端,尤其是 Microsoft Outlook 等桌面用戶端,不支援外部字體。 Gmail 等基於網路的用戶端擁有更好的支持,但仍存在局限性。
- 後備字體:這些對於確保您的電子郵件在所有客戶中保持功能性和美觀至關重要。中的序列為
font-family
樣式從最喜歡的字體到最不喜歡的字體,以通用系列結束(sans-serif
orserif
). - 測試:始終在各種電子郵件用戶端上測試您的 HTML 電子郵件,看看它們的呈現方式。像 Litmus 或 Email on Acid 這樣的工具可以幫助解決這個問題。
對於銷售和行銷電子郵件,視覺吸引力可以顯著影響訊息的有效性。雖然使用獨特的外部字體可以幫助您的電子郵件脫穎而出,但必須確保您的後備字體保持有效接收郵件所需的專業和可讀品質。
電子郵件中有 4 種字體類型
- 襯線 – 襯線字體的字元在筆畫末端帶有花體、點和形狀。它們具有正式的外觀、間距良好的字元和行距,大大提高了可讀性。此類別中最受歡迎的字體是 Times、Georgia 和 MS Serif。
- 沒有襯線 – 無襯線字體就像那些叛逆的人,他們希望創造自己的印象,並且不附加任何花哨的裝飾。它們具有半正式的外觀,實用性勝於外觀。此類別中最受歡迎的字體是 Arial、Tahoma、Trebuchet MS、Open Sans、Roboto 和 Verdana。
- 會標– 受打字機字體的啟發,這些字體在字元末尾有一個區塊或「板」。儘管很少在 HTML 電子郵件中使用,但 MultiMIME 電子郵件中的大多數「後備」純文字電子郵件都使用這些字體。使用這些字體閱讀電子郵件會給人一種與政府文件相關的行政感覺。 Courier 是該類別中最常用的字體。
- 書法 – 模仿過去的手寫字母,這些字體的與眾不同之處在於每個字元遵循的流暢運動。這些字體在有形媒體上閱讀起來非常有趣,但在數位螢幕上閱讀它們可能相當麻煩且眼睛疲勞。因此,此類字體主要用作標題或標誌作為靜態圖像。
電子郵件安全字體包括 Arial、Georgia、Helvetica、Lucida、Tahoma、Times、Trebuchet 和 Verdana。自訂字體包括相當多的系列,對於不支援它們的客戶端,有必要使用後備字體進行編碼。這樣,如果客戶端不支援自訂字體,它將回退到它可以支援的字體。
宋體
font-family: Arial, sans-serif;
格魯吉亞
font-family: Georgia, serif;
黑體
font-family: Helvetica, sans-serif;
青岡
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
宋體
font-family: Tahoma, Geneva, sans-serif;
時
font-family: 'Times New Roman', Times, serif;
投石機
font-family: 'Trebuchet MS', sans-serif;
宋體
font-family: Verdana, Geneva, sans-serif;
要更深入地了解,請務必閱讀 萬信的 文章:
如果您想與資訊圖表互動,請務必點擊。