如何让 HTML/CSS 在电子邮件中显示？答案

【问题标题】：How can I get HTML/CSS to display in an email?如何让 HTML/CSS 在电子邮件中显示？
【发布时间】：2014-07-15 13:18:55
【问题描述】：

我提供的服务需要先激活才能使用该帐户。在我发送的激活邮件中，我们想添加 CSS 来设置样式。我们这样做了，我们创建了一个模板。但是，当发送电子邮件时，所有的 CSS 似乎都被删除了，因为模板并未出现在实际的电子邮件中 - 只是 HTML。

我的 CSS 在标签内，部分元素无法转换为内联 CSS。

我们正在使用 PHPMailer。如何解决？

【问题讨论】：

如果它们不能转换为内联样式，那么祝你好运。大多数电子邮件客户端会忽略/丢弃除内联样式之外的任何内容。它回到了'ol绘图板，原来如此。
为什么不能转换成内联样式？
如果可以的话 - 我将如何将 @font-face 和 :hover 和 :focus 之类的东西转换为内联样式？
...您与下面给您“答案”的人一起讨论。让他为自己的观点而努力。否则，请继续您的研究。
如果您缺少一些关于 CSS 和电子邮件的基本知识，我建议您学习一些 mailchimp 教程 (kb.mailchimp.com/article/css-in-html-email) 甚至一些电子邮件 CSS 框架，例如 zurb.com/ink。

标签： php html css email phpmailer

【解决方案1】：

电子邮件客户端仅支持非常有限的 CSS 属性子集。此页面提供了对各种客户端中 CSS 支持的出色概述：http://www.campaignmonitor.com/css/

一般来说，最好的办法是尽可能使用内联 CSS。我可能会从looking into tools that convert stylesheets into inline CSS开始，如果这还不够，那么还要手写一些样式。

我必须强调，创建可在所有电子邮件客户端上完美运行的 CSS 本身就是一门艺术 - 以我有限的经验 - 几乎是不可能的。就像浏览器一样，你可以做一些非常hacky的东西并使用polyfills之类的东西，但是对于电子邮件客户端，你在这方面很不走运。如果你认为你可以简单地重复使用你的普通 CSS，那么你最终会遇到麻烦。

对您提出的一些具体问题的详细回复：

@font-face 不适用于常用的电子邮件客户端，因此无法保证字体在任何地方看起来都相同。我最好的选择是尽可能避免使用自定义字体，如果你真的需要使用 font-face，那么至少通过font-family 使用一些类似的字体作为后备，如果真的很痛苦，那么可能会将文本预渲染为图片（虽然通常是个坏主意）。
:focus 在 Gmail 或 Outlook 系列的电子邮件客户端中根本不起作用，因此您通常希望避免任何依赖于它的样式。
:hover 效果也不好

【讨论】：