我正在尝试使用“ Comic Sans MS”字体,此字体可以完美地加载到gmail Web应用程序中,但是在gmail应用程序中,它不会在gmail中呈现或无法加载字体,它只是显示常规字体,我浏览了Internet和Stackoverflow上的所有帖子,但不知道我的代码出了什么问题。
下面是我正在使用的代码,不确定我在哪里出错!如果有人能让我知道我在哪里做的错误,那就太好了。
<!DOCTYPE html>
<html style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;\">
<head>
<meta name=\"viewport\" content=\"width=device-width\" />
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
<title>Email Verification</title>
<style type=\"text/css\">
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.6em;
}
body {
background-color: #f6f6f6;
}
@media only screen and (max-width: 640px) {
body {
padding: 0 !important;
}
h1 {
font-weight: 800 !important; margin: 20px 0 5px !important;
}
h2 {
font-weight: 800 !important; margin: 20px 0 5px !important;
}
h3 {
font-weight: 800 !important; margin: 20px 0 5px !important;
}
h4 {
font-weight: 800 !important; margin: 20px 0 5px !important;
}
h1 {
font-size: 22px !important;
}
h2 {
font-size: 18px !important;
}
h3 {
font-size: 16px !important;
}
.container {
padding: 0 !important; width: 100% !important;
}
.content {
padding: 0 !important;
}
.content-wrap {
padding: 10px !important;
}
.invoice {
width: 100% !important;
}
}
</style>
</head>
<body itemscope itemtype=\"http://schema.org/EmailMessage\" style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.6em; background-color: #f6f6f6; margin: 0;\" bgcolor=\"#f6f6f6\">
<table class=\"body-wrap\" style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; background-color: #f6f6f6; margin: 0;\" bgcolor=\"#f6f6f6\"><tr style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;\"><td style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0;\" valign=\"top\"></td>
<td class=\"container\" width=\"600\" style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; display: block !important; max-width: 600px !important; clear: both !important; margin: 0 auto;\" valign=\"top\">
<div class=\"content\" style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; max-width: 600px; display: block; margin: 0 auto; padding: 20px;\">
<table class=\"main\" width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; border-radius: 3px; background-color: #fff; margin: 0; border: 1px solid #e9e9e9;\" bgcolor=\"#fff\"><tr style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;\">
</tr><tr style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;\"><td class=\"content-wrap\" style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 20px;\" valign=\"top\">
<table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;\"><tr style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;\"><td class=\"content-block\" style=\"font-family: 'Comic Sans MS',cursive,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;\" valign=\"top\">
Hi,
<br /><br />
Please verify your email address by clicking the link below.
<br /><br />
<a href=\"$url\">$url</a>
<br /><br />
If the above URL does not work try copying and pasting it into your browser.<br /><br />
If you still encounter any problem, please contact us at <a href=\"mailto:[email protected]\">[email protected]</a>
<br /><br />
Thank You,<br />
The XYZTeam
</td>
</tr></table></td>
</tr></table>
</td>
</tr></table></body>
</html>
大多数邮件应用程序不支持字体。您使用的字体可能已安装在Windows / mac系统中。因此,当您在浏览器中打开邮件时,它将以您使用的字体正确呈现。在手机中,它将是默认字体,而不是您使用的字体。
Gmail应用程序对电子邮件模板不满意。Gmail应用无法处理很多事情。