HTML 电子邮件无法在 Gmail 中正确显示答案

【问题标题】：HTML email doesn't showing properly in GmailHTML 电子邮件无法在 Gmail 中正确显示
【发布时间】：2017-10-25 13:46:32
【问题描述】：

我正在发送 HTML 电子邮件并在 gmail 中获得不同的结果。

这就是我在 gmail 上得到的，

这就是我正在接受的Mintmail

我也想要 gmail 中的 mintmail 邮件。注意字符间距和字体的区别（标题字体：Oswald 和副标题字体：Vollkorn）。

这是我发送邮件的 PHP 代码，

$to = $email_to;
$subject = 'Welcome to Codebreak!';
$from = $email_from;

// Headers for the HTML email
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From: '.$from."\r\n".
    'Reply-To: '.$from."\r\n" .
    'X-Mailer: PHP/' . phpversion();

// Email body
$message = '';
$message .= '<html><head>';
$message .= '<meta charset=utf-8>';
$message .= '<link href=//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css rel=stylesheet integrity=sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN crossorigin=anonymous>';
$message .= '<link href=https://fonts.googleapis.com/css?family=Alfa+Slab+One|Open+Sans|Chivo:900|Playfair+Display:700|Roboto:400,300,500,700|Oswald:400,500,600,700|Vollkorn:400,700 rel=stylesheet>';

$message .= '</head><body>';
$message .= '<div class=main_container style=width:80%;margin:0 auto;>';
$message .= '<div class=top_red style=padding:15px;background-color:#E74C3C;color:#fff;><div class=mail_icon style=margin-left:auto;margin-right:auto;width:150px;><img src=images/email.png height=150px width=150px></div><div class=texts style=text-align:center;><h2 style=font-family:Oswald,sans-serif;font-size:45px;color:#fff;margin-bottom:10px;margin-top:5px;>HEY, '.$first_name_to.'!</h2><h3 style=font-family:Vollkorn,serif;font-size:25px;font-weight:normal;margin-top:10px;>Welcome to the Codebreak family! :)</h3></div></div>';
$message .= '</div></body></html>';

mail($to, $subject, $message, $headers);

我尝试修改内联 CSS 并尝试在它们周围添加双引号（实际上我删除了双引号，因为 Gmail 正在向它们添加转义字符）。我的解决方案都不起作用，有人可以帮忙吗？

【问题讨论】：

使用基于表格的结构，它将帮助您在大多数电子邮件上保持相同的结构。
呼应 Himanshu 的评论。在电子邮件中使用 PHP 通常不会统一工作。坚持 XHTML 标准，在大多数电子邮件客户端中实现纯一对一。 HTML5 有点统一，但肯定有一些元素不能正常工作。
避免在电子邮件中使用自定义字体，并内联所有 CSS。

标签： php css html-email

【解决方案1】：

Oswald 和 Vollkorn 是 Google 网络字体，网络字体根本不能用于 Gmail，通常也不能用于许多版本的 Outlook。

您需要选择一种网络安全字体作为备用字体。 Impact 将是 Oswald 和 Georgia 作为 Vollkorn 的替代者的不错选择。

此外，您的 Google 字体列表中包含您未在电子邮件中引用的字体：

https://fonts.googleapis.com/css?family=Alfa+Slab+One|Open+Sans|Chivo:900|Playfair+Display:700|Roboto:400,300,500,700|Oswald:400,500,600,700|Vollkorn:400,700 rel=stylesheet

我的建议是删除 Alfa Slab、Open Sans、Chivo、Playfair 和 Roboto 以使您的样式表更小，这将加快您在浏览器中的电子邮件呈现速度。

以下内容也应该有帮助：

祝你好运。

【讨论】：

【解决方案2】：

这可能与gmail removing the entire HEAD section of the email有关。

根据上面提供的链接：

  As a webmail client, Gmail has to take some precautions when displaying an email.
Like most webmail clients, Gmail uses a preprocessor to strip any code from an
email that could be a security threat or interfere with the rendering of the
client interface itself.

  Commonly stripped elements include JavaScript, object and embed tags, and Flash.
Gmail goes one step further and strips out both the head and body tags, as well as
any style tags in an email.

【讨论】：

【解决方案3】：

这就是我要做的，如果我需要生成一个与电子邮件客户端具有广泛兼容性的模板，

注册free mailchimp account。
根据需要设计模板，
复制粘贴您的模板代码（您设计的）用于发送电子邮件。

【讨论】：