Webfonts不在Gmail应用程序上呈现,但是在Gmail Web App上呈现

问题描述 投票:0回答:2

我正在尝试使用“ 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>
html css gmail webfonts google-webfonts
2个回答
0
投票

大多数邮件应用程序不支持字体。您使用的字体可能已安装在Windows / mac系统中。因此,当您在浏览器中打开邮件时,它将以您使用的字体正确呈现。在手机中,它将是默认字体,而不是您使用的字体。

请参考Gmail not showing correct font


0
投票

Gmail应用程序对电子邮件模板不满意。Gmail应用无法处理很多事情。

© www.soinside.com 2019 - 2024. All rights reserved.