电子邮件中的自定义字体

Avatar of Chris Coyier
Chris Coyier 发布

DigitalOcean 为您旅程的各个阶段提供云产品。 立即开始使用 价值 200 美元的免费信用额度!

一位读者来信

是否可以在 CSS 中绘制整个字体并在电子邮件中发送? 我们公司需要向约 20,000 人发送电子邮件,以介绍即将推出的新品牌。 电子邮件将采用 HTML/CSS 格式。 我的首席执行官对想要实现的美学风格非常具体,其中包括使用既不在 Mac 也不在 Windows 计算机上本地的字体。 我们不想在电子邮件中使用图像。

首先,您的首席执行官关心字体和美学本身就很酷。 通常来说,让掌舵者关心美观和细节到这个程度都是好事。 让我们考虑一下选择。

如今,自定义字体首先想到的是 @font-face。 它的浏览器支持 非常棒。 不幸的是,我们需要的不是浏览器支持,而是电子邮件客户端支持。 根据 Campaign Monitor 的一些研究,@font-face 仅在 Apple 的 Mail.app 和 iOS 上的 Mail 应用程序中有效。 您可以尝试向您的首席执行官提出渐进增强方案,但是,以这种低级别的支持,可能很难说服他。

您还提到了尝试通过 CSS 以某种方式重新创建字体。 也许可以尝试像这样。 我甚至 玩过这个概念,尤其考虑到无图像电子邮件的想法。 不过,这属于大像素艺术的范畴。 如您所知,逐像素重新创建字体,不带抗锯齿,简直是痴人说梦。

实际上,我认为有两个解决方案。

第一个是重新考虑这句话:“我们不想在电子邮件中使用图像。” 为什么不呢? 由于您正在寻找巧妙的解决方案,并且文本电子邮件除了 ASCII 艺术 之外,几乎无法实现任何巧妙的功能,因此您似乎不介意发送 HTML 电子邮件。 人们经常在电子邮件中使用图像。 诚然,用户经常需要 专门选择 查看它们,这有点让人反感,但是,在图像上使用正确的 ALT 文本,即使他们从不这样做,电子邮件仍然可以正常工作。

第二个是放弃电子邮件中的自定义字体。 这里不是说要悲观,但是,电子邮件中缺少特定字体不会破坏您的品牌。 在您所有同意确实至关重要的任何地方(例如口号?),请使用图像,否则,请使用与您的品牌字体搭配良好的易读字体,并继续执行更重要的任务。

就我个人而言,我认为我会选择 @font-face,尽管目前支持率很低。 主动开发您想要运行的内容有助于建立必要的动力,从而让产品供应商(在这种情况下是电子邮件客户端)改进他们的产品,并为我们提供更好的 CSS 支持。

更新,2012 年 12 月

Campaign Monitor 再次进行了最新研究。 截至更新,支持包括:iOS 邮件、OS X 上的 Mail.app、Lotus Notes 8、Android 上的默认邮件、Outlook 2000 和 Thunderbird。