电子邮件安全字体和 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。
- Sans 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;
要更深入地了解,请务必阅读 万信的 文章:
如果您想与信息图互动,请务必点击。