HTML电子邮件无法在Gmail中正常显示

时间:2017-10-25 13:46:32

标签: php css html-email

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

这是我在gmail上获得的, This is what I'm getting on gmail

这就是我Mintmail的目标 this is what I'm getting on 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正在为它们添加转义字符)。我的解决方案都没有用,有人可以帮忙吗?

3 个答案:

答案 0 :(得分:2)

Oswald和Vollkorn是Google网络字体,网络字体与Gmail完全不兼容,通常不适用于许多版本的Outlook。

您需要选择网络安全字体作为后备。对于奥斯瓦尔德而言,影响将是一个很好的替补选择,格鲁吉亚将取代沃尔科恩。

此外,您的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以缩小样式表,这样可以加快浏览器中的电子邮件呈现速度。

以下内容也应该有所帮助:

祝你好运。

答案 1 :(得分:1)

这可能与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.

答案 2 :(得分:0)

如果我需要生成与电子邮件客户端具有广泛兼容性的模板,

这就是我的工作

  • 注册free mailchimp account
  • 根据需要设计模板,
  • 复制粘贴模板的代码(您设计的代码)以发送电子邮件。