网络字体：如何使它们在电子邮件中完美运行

已发表: 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 日。