为 Gmail 设置 HTML 电子邮件样式
Posted
技术标签:
【中文标题】为 Gmail 设置 HTML 电子邮件样式【英文标题】：Styling HTML email for Gmail 【发布时间】：2012-02-21 19:01:25 【问题描述】：我正在生成一个使用内部样式表的 html 电子邮件，即
<!doctype html>
<html>
<head>
<style type="text/css">
h2.foo color: red
</style>
</head>
<body>
<h2 class="foo">Email content here</foo>
</body>
</html>
在 Gmail 中查看时，内部样式表中的所有样式似乎都被忽略了。似乎 Gmail 忽略了除内联规则之外的所有样式，例如
<h2 style="color: red">Email content here</foo>
这是我在使用 Gmail 查看时设置 HTML 电子邮件样式的唯一选择吗？
【问题讨论】：
是的，这是唯一的，因为许多基于 Web 的电子邮件客户端不识别内部样式表。实际上，内联样式是设计 html 时事通讯的推荐方式。 据我所知，电子邮件阅读器应该支持 html 3.2 和 css 1.1。 您是如何生成电子邮件的？我的意思是你添加了创建意图的代码？ 使用<html> 开头标签通常是个好习惯；)
Gmail 很烂。 ios 应用和基于 Web 的应用！
【参考方案1】：
我在 Mailjet 中设计模板时遇到了同样的问题。问题的解决方案是在 <style> 标签内缩小 CSS 代码。
【讨论】：
【参考方案2】：我同意所有支持类和内联样式的人的观点。您现在可能已经了解了这一点，但如果您的样式表中有一个错误，Gmail 将忽略它。
您可能认为您的 CSS 很完美，因为您经常这样做，为什么我的 CSS 会出现错误？通过 CSS Validator（例如 http://www.css-validator.org/）运行它，看看会发生什么。在遇到一些 Gmail 显示问题后，我这样做了，令我惊讶的是，几个 Microsoft Outlook 特定的样式声明显示为错误。
这对我来说很有意义，所以我将它们从样式表中删除并将它们放入 only for Microsoft 代码块中，如下所示：
<!--[if mso]>
<style type="text/css">
body, table, td, .mobile-text
font-family: Arial, sans-serif !important;
</style>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
这只是一个简单的示例，但是，谁知道呢，它可能会派上用场。
【讨论】：
谢谢，关于无效 CSS 的部分为我节省了很多时间。如果你还在，请告诉我。 嘿@ShadowWizard。我走了一段时间，但又回来了。很高兴它为您节省了一些时间。 干杯，只是想确保赏金不会被浪费。 :-)【参考方案3】：截至 2016 年 9 月 30 日，此处的答案已经过时。Gmail 目前是 rolling out support，用于 head 中的 style 标记以及媒体查询。如果您只关心 Gmail，那么您可以像现代开发人员一样安全地使用课程！
供参考，您可以查看official gmail CSS docs。
附带说明一下，Gmail 是唯一不支持style（reference，直到他们更新）的主要客户端。这意味着您可以几乎安全地停止将样式内联。一些比较模糊的客户可能仍然需要它们。
【讨论】：
看来还是不行。我们在 Litmus 中尝试过，但它不起作用。有什么特殊原因吗？ @ArianHosseinzadeh 什么不起作用？添加了对他们关于此事的文档的引用。 我们在 Litmus 中尝试过，它忽略了非内联样式。在他们宣布 @ArianHosseinzadeh 我在他们的文档中复制并粘贴了他们的示例，并通过putsmail 运行它。样式在 gmail 中显示。我在 Chrome 浏览器中验证了 android gmail 应用和 gmail。我的猜测是 Litmus 预览尚未更新以反映更改。 我想知道为什么我的样式不起作用，并意识到我已将它们放在body 标签而不是 head 标签中。【参考方案4】：
请注意，用于发送电子邮件的服务和工具可能能够为您内联您的 CSS，从而允许 <style> 标记中的 CSS 在 Gmail 中工作。
例如，如果您使用 MailChimp 发送电子邮件，默认情况下您的 <style> 标签中的 CSS 将自动内联。使用 Mandrill，您可以通过选中“设置”选项卡的“发送默认值”部分中的“HTML 电子邮件中的内联 CSS 样式”框来启用此功能（尽管默认情况下它已禁用 for performance reasons）：
【讨论】：
【参考方案5】：正如其他人所说，一些电子邮件程序不会读取 css 样式。如果您已经编写了网络电子邮件，则可以使用 zurb 中的以下工具来内联您的所有样式：
http://zurb.com/ink/inliner.php
当使用上面提到的来自 mailchimp、活动监视器等的模板时，这非常方便，因为正如您所发现的，它们在某些电子邮件程序中不起作用。此工具将您的样式部分留给将读取它的邮件程序，并将所有样式内联，以便以您想要的格式获得更通用的可读性。
【讨论】：
感谢您提供内联链接。【参考方案6】：Gmail 开始对头部区域的样式标签提供基本支持。尚未发现任何官方信息，但您可以自己轻松尝试。 它似乎忽略了类和 id 选择器，但基本的元素选择器可以工作。
<!doctype html>
<html>
<head>
<style type="text/css">
pfont-family:Tahoma,sans-serif;font-size:12px;margin:0
</style>
</head>
<body>
<p>Email content here</p>
</body>
</html>
它将在自己的头部区域创建一个样式标签，限制在包含邮件正文的 div 中
<style>div.m14623dcb877eef15 pfont-family:Tahoma,sans-serif;font-size:12px;margin:0</style>
【讨论】：
它仍然不支持媒体查询，但有点遗憾。类和 ID 也很有用 :) 他们现在也可以进行媒体查询，并且更全面地支持 css 样式。 ***.com/questions/39759764/…【参考方案7】：对所有内容都使用内联样式。该站点会将您的类转换为内联样式：http://premailer.dialect.ca/
【讨论】：
这个网站很棒。显示警告并为您提供纯文本输出以及重新制作 HTML。 此 Premailer 使用 Ruby，来源：github.com/premailer/premailer。 Python 中还有一个：premailer.io 来源：github.com/peterbe/premailer，都是开源的。 这个答案不再准确。 gmail 支持样式和类，并且有关于这个主题的官方文档 - 请参阅下面 Matthew Johnson 的答案。以上是关于为 Gmail 设置 HTML 电子邮件样式的主要内容，如果未能解决你的问题，请参考以下文章
对于从 java 程序发送的电子邮件，html 内容中的 png 图像未显示在 gmail 客户端上
Outlook 2007 将 HTML 电子邮件中的链接样式更改为在发送到 Hotmail、Gmail 等时具有蓝色下划线。任何修复？