一位读者来信
是否可以在 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。
恕我直言,我不同意。 您的老板想要的东西在电子邮件客户端中是不可能的。 您有两个选择:要么放弃,要么使用图像显示您的字体。
只有内联 CSS 在电子邮件客户端中得到支持,即使这样也会很棘手。 电子邮件就像在 90 年代编码,使用几乎没有电子邮件客户端支持的东西是您能做到的最糟糕的事情。 在所有电子邮件客户端都推出自动软件更新并进行一些主动的协调开发之前,这种情况不会改变。 对不起,坏消息。
哈哈,这就是我想的,然后我看到你已经评论了。 实际上,我想的是,这确实是积极的、理想主义的思考方式。
实际上,首席执行官可能并不关心美观和细节,而是觉得“正常”字体很无聊,并且很想使用 Curlz MT,因为他/她认为这可以传达公司的“趣味”氛围。
同意,Ruby 说得对……
不可能完成的任务 - 我必须同意 Ruby 的观点。
即使您按照指示正确执行所有操作,您仍然会在不同的电子邮件客户端中遇到不同程度的问题。
使用经过良好优化的图像来显示特定字体通常是您的唯一选择(至少根据我的经验是这样)。
期望在众多电子邮件客户端(及其版本)中仅使用 CSS 就能获得积极的结果,这真是自欺欺人。
仅仅是我的意见,
干杯!
我很好奇,品牌的字体是什么? 如果是 Helvetica、Arial、Georgia 或 Times New Roman,那么确实很有可能。 否则,我必须同意 Chris 和这里的评论。
此外,我建议您查看以下资源:
http://www.campaignmonitor.com/gallery/
http://mailchimp.com/resources/html-email-templates/
向您的老板展示您最喜欢的方案。 最好的情况是,她能够同意,实际上,即使正文没有用组织的字体显示,品牌仍然是可能的,而且是相当不错的品牌。
尝试搜索 Cufón。
我认为电子邮件中的 JavaScript 支持甚至比 @font-face 支持率更低……
我尝试在最近的一个项目中使用 Cufon,效果还不错,但是也许 Rob 的说法没错……
我对答案感到非常惊讶!
也许我对电子邮件客户端技术的了解太少。
请纠正我,但我认为 Thunderbird 使用与 Firefox 相同的技术来显示 HTML,而 Outlook 使用 Word 的渲染器来显示它。 我不知道 Word 能做什么,但我认为它并不差。
在我看来,您似乎从未尝试过。 我不确定 Thunderbird 的情况,但我可以告诉您,在 Outlook 中完成任何基于标准的良好编码的 HTML & CSS 内容都是网页开发人员的地狱。
在工作中,我经常处理 HTML 电子邮件,而 Outlook 对常用网页开发技术的支持甚至比 IE6 的支持还要糟糕。 至少在 2007 和 2010 版本中是这样。 2003 因为使用相同的渲染引擎,所以与 IE6 旗鼓相当。
就像 Ruby 说的,这就像在 90 年代编码。
耶! 我这周早些时候刚和同一个读者谈过,所以这对我和他来说都非常及时有趣。
逐像素创建自定义字体确实似乎是唯一的选择,但那简直是噩梦。
最终,我希望首席执行官能够意识到,花费 100 小时制作尖端(血腥?残暴?)电子邮件远没有花费几小时改进他们的网站更有价值。
由于没有标准,电子邮件的跨客户端渲染(如 Ruby 所说)非常困难。 Outlook(大多数电子邮件(取决于内容和收件人)在其中打开)使用 Word 03、07、10 和 Webkit(仅限 Mac 上的 Outlook 11)来渲染电子邮件。 与航母相比,HTML 电子邮件就像独木舟在公海中航行。
同意第一位评论者的观点,并做一些说明。 我相信,一些电子邮件/浏览器组合可能能够渲染 @font-face 导入所需的特殊 CSS - 但 Gmail 会简单地忽略所有非内联 CSS。 我预计,这 20,000 名受众中会有相当一部分使用 Gmail。
HTML 电子邮件使用表格进行布局,内联样式,有限的页面级 CSS 使用,以及没有最新的 CSS3 功能。
图像可以正常工作。 您别无选择。
Outlook 的新版本是最大的问题之一。旧版本(2003 及更低版本)使用 Internet Explorer 的 HTML 引擎来解析 HTML,然后微软的天才们认为将它切换到 Microsoft Word 来完成这项工作是个好主意。Microsoft Word!一个文字处理程序来处理 HTML?!
无论如何,
我已经处理过一些突破常规的邮件,我同意 Ruby 和这里所有人的观点,这实际上是不可能的,也不值得。用图片创建标题或醒目标题,使用合适的替代文本和标题文本,然后结束。这 20,000 人是你的老板购买的名单,还是已经是你的客户,并将你的公司列为安全发件人?如果是这样,那么你就不应该遇到太多图片被屏蔽的问题,假设你没有将它们托管在办公室可能会屏蔽的地方。
我支持进步,但除非你非常了解你的受众,否则使用 @font-face 并不是正确的选择。我的一个客户有 50,000 名订阅者,完全是 B2B。根据我们最新的 MailChimp 统计数据,50% 的人使用 Outlook 2007/10,另有 25% 的人使用 Outlook 2000/03 作为他们的电子邮件客户端。因此,他们的电子邮件活动背后的 HTML 充满了表格、内联样式和其他过时的样式实践,只是为了确保兼容性。
我使用 Opera 浏览器,它内置了邮件客户端,尽管它没有很高的用户群,但我认为如果我们向相关邮件客户端提交功能请求,那么 @font-face 支持就会成为常态!
现在是用户要求改变的时候了!
http://my.opera.com/community/forums/findpost.pl?id=11468602
为了严格地回答“是否可以在 CSS 中绘制整个字体”这一部分
.fontsquirrel 生成器在专家模式下允许你生成 base64 代码,以便将字体嵌入 CSS。
也可以将图片 base64 编码到 CSS 和 HTML 中:http://www.base64-image.de
要是电子邮件客户端之间有一个标准就好了!
的确。这样就能解决所有这些问题……
要是所有网页浏览器之间都有一个标准就好了。
作为每天都要创建电子邮件模板的人,我认为很重要的一点是——就像 Ruby 在上面所说的一样——@font-face 以及其他许多 css 都是行不通的。不幸的是,Outlook 2007/2010 仍然占你受众的 30% 到 40%,具体取决于你的目标市场。这意味着,为了最大限度地保持一致性,编写 html 电子邮件基本上就是为适应 Microsoft Outlook 而编写。
Outlook 2007/2010 使用 Microsoft Word 的引擎来渲染电子邮件,而不是 Internet Explorer 的引擎。这意味着,有很多 css 规则不适用于你的电子邮件,更不用说你被迫使用 90 年代的表格时代,而不是用现代的 html 进行编码了。
一个好的起点是 Sean Powell 的模板样板。它可以在 github 上找到:https://github.com/seanpowell/Email-Boilerplate/blob/master/email.html。大多数 css 需要内联才能正确渲染,但这确实是一个很好的起点。
另外,如果你不想花时间将你的样式表转换为内联 css,你可以使用 TorchBox 提供的电子邮件内联样式器:http://inlinestyler.torchboxapps.com。它不仅可以为你内联 css,还可以告诉你哪些电子邮件客户端可以正确渲染它。
与 网页标准项目(WaSP)等效的是 电子邮件标准项目。它们在目标和愿景方面是等效的,但在现实世界的成功方面却不是。
我不确定为什么像 mail chimp 和 campaign monitor 这样的所有这些模板网站都使用不支持的东西,我刚刚打开了一个 mail chimp 模板,它在头部有 200 行样式……Outlook 会忽略所有这些……我同意微软的家伙们用 WORD 渲染 html 电子邮件是白痴,但我们必须相应地编写代码,我会使用图片来显示字体
Outlook 不会忽略<head>中的<style>。它甚至会在它收到的消息中添加一堆自己的样式。有趣!
这场讨论将带来很多关于这个问题的脑力。你不能只是说:“做不到”然后希望那里的 css 大师们能忍受它。如果有一种方法可以获得某种绝对定位就好了……
大多数电子邮件程序都禁用了 javaScript,这将产生一个替代方案,即电子邮件链接到包含 JavaScript 的网页。我建议你使用图片来显示电子邮件客户端页面,并在电子邮件链接网页中实现 Cufon……
我认为大多数人更喜欢在浏览器窗口中阅读邮件……
我总是使用浏览器窗口来阅读我收件箱中的邮件……
* 我总是使用浏览器窗口来阅读我收件箱中的邮件……
我真的从未在浏览器中打开过电子邮件,如果他们不能像我一样付出所有努力来支持电子邮件客户端,那么我 **不会** 阅读他们的电子邮件。
我知道这可能有点牵强,但尝试将字体文件(解)编码(?) 到 localStorage 或 cookie 中,然后以这种方式访问它怎么样?理论上,如果你能以某种方式保存字体,你应该能够在没有 font-face 的情况下访问它。
并不是说我试过,我只是提出一些奇怪的想法。
* 理论上 #typo
同意 Ruby 的观点
@Tim Wright:无意冒犯,但……现在这完全不可能。
除了大多数网页客户端(hotmail、gmail)会高度操纵和限制你的标记,比如剥离头部、链接、脚本元素,以及剥离与背景、位置甚至内联样式属性中的填充相关的样式,在一个没有 JavaScript 访问权限的环境中,要么根本不是有效的 HTML 文档,要么有时是 HTML 3.2,最不可能想到的是尝试使用 HTML5 JavaScript API……
几年前,我放弃了漂亮的电子邮件模板,至少在大规模营销方面是这样的。
我现在的策略
* 以你想要的方式完美地完成它,并从具有公共 url 的网页服务器上在线提供它。
* 将完整的设计保存为一张图片(JPEG 或 PNG)和 HTML:保持非常简洁,只有一个 img 元素在一个 div 中,在 html 元素中的 body 元素中。为 html、body 和 div 元素提供相同的内联样式属性值,以完全填充周围的背景颜色,并为图片设置文本居中。最后,在图片之前添加一个指向在线版本的锚标记,并在图片周围也包裹一个锚标记。
同意 Ruby 的观点
我不得不赞同这个话题的共识。我已经做了很多 HTML 电子邮件,虽然现在比以前好了,但以前的一些问题仍然存在。可能你的 CEO 需要接受一些教育。
如果这是发给 20,000 人的反应良好且感兴趣的受众,那么将他们指向一个网页,该网页只有一个简单的单一行动号召电子邮件——点击这里,了解我们的新品牌。
如果你要向这个受众介绍你的新品牌,并且你的领导层也注重设计,那么可能需要传递比电子邮件正文中能容纳的更多信息。将责任从可能存在的 20,000 种不同的电子邮件客户端配置中移除——创建一个超级干净的响应式 HTML & CSS 页面,它在几乎任何地方都能看起来很棒。
根据我自己的经验,那些我只收到一个行动号召(点击这里)以及一个简单的、让我感兴趣的前提的电子邮件——我更有可能点击并参与。而那些设计过度、试图用花哨的颜色和时髦的字体来告诉我它们有多棒的 HTML 电子邮件,与点击删除一样容易被遗忘,不如一个酷炫的网页(我可能会收藏并分享!)。
JS
我担心……
你们是最终用户和开发者,你们 **预期** 不会有任何改变。
我认为,如果我们更积极地要求你在你经常使用的客户端中提供支持,那么也许我们现在至少在一些客户端中已经有了 @font-face 支持。
一些链接可以帮助你了解当前的技术……
将数据嵌入 css……
http://jonraasch.com/blog/css-data-uris-in-all-browsers
mime 和多部分电子邮件概述
http://www.aspnetmime.com/help/default.htm?page=welcome/overviewmimei.html
w3g.org – css3-fonts – #font-resources
http://dev.w3.org/csswg/css3-fonts/#font-resources
因此,请设置一个带有嵌入 CSS 的测试 html 文件,看看它是否在不同的客户端上都能正常工作! –
PS. 我正在积极调查此事。
电子邮件模板真的很让人头疼。
我是一个硬核菜鸟。但也许这会有所帮助。它运行良好。
http://www.imgtocss.com/
CEO 的工作是成为有远见的人。如果有足够的时间和金钱,任何事情都是可能的。告诉你的 CEO,你需要一大笔钱,或者等到电子邮件客户端赶上浏览器 CSS 支持功能,也就是 2030 年。在此期间,使用图像或字体堆栈,至少可以让你获得接近你想要字体的效果。如果它是来自 CEO 的,可能就是 Comic Sans。:)
同上,图像是在电子邮件中创建美观且能够继续展示您品牌的唯一合理方法。电子邮件 CSS 支持非常薄弱,而且会继续发展,但速度非常慢。每家大公司都使用图像电子邮件截图,我不明白有什么理由阻止你?祝你好运。
有一些方法可以将图像转换为 1x1 像素的表格单元格,并使用背景颜色来呈现电子邮件中美观的丰富布局。
我在这里漏掉了什么,你提到这是为了向 20,000 人发送电子邮件来介绍一个新品牌。
这似乎是很多要发送的电子邮件,而且这非常适合使用 mailchimp.com 或类似服务发送的电子邮件,可以处理此类活动,并且是介绍新品牌的好方法。
当然还有很多其他的电子邮件营销公司;
这里有一些…
mailchimp.com
madmimi.com
constantcontact.com
这些服务都允许对电子邮件内容进行很好的控制,并且还能以专业的方式处理电子邮件的发送。
你好 Ruby 和其他所有人。这是可以做到的,但代价高昂,这就是问题所在。
诀窍在于如何做。有些设计师只是发送预制的图像文件,我个人不喜欢这种做法。
然后还有 JavaScript 不支持的问题。根据我的经验,关键在于前几行 - 我总是从远程服务器提供 HTML/CSS,这样即使出现故障也能显示纯文本链接。代码会检测到是否使用的是那些糟糕的旧电子邮件客户端,然后提供文本链接,或者如果电子邮件确实下载了一个 1 像素的图像,服务器就会尝试以 CSS/图像替换/base64 等方式提供其余内容。开发这套系统的成本非常高。这是 CEO 必须解决的问题。他们能负担得起吗?
@hilary 有趣的概念。
所以电子邮件的结构是这样的,前几行调用远程服务器(托管 HTML/CSS)来查看 1 像素的图片是否加载,如果加载了,就加载所有 HTML/CSS,如果没有加载,就继续加载基本电子邮件源,即只包含链接的纯文本版本。这是使用条件 CSS 还是 JavaScript 完成的?