如何在 Gmail 中使用自定义字体？

Question

如何在 Gmail 中使用自定义字体？

Rav*_*rma 8 html css fonts gmail webfonts

我们如何在邮件程序尤其是 gmail 中使用自定义字体。我搜索了很多，但没有找到任何有用的东西，但我在我的 gmail 帐户中看到一个使用“proxima nova”字体的“uxpin”邮件程序......将非常感谢任何帮助。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if !mso]><!-- -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!--<![endif]-->
<title>Virgin Atlantic</title>

<style type="text/css">
    @font-face {font-family: 'GothamLight';    src: url('http://ravisharma.ml/mailer1/fonts/GothamLight.eot');    src: url('http://ravisharma.ml/mailer1/fonts/GothamLight.eot?#iefix') format('embedded-opentype'),         url('http://ravisharma.ml/mailer1/fonts/GothamLight.woff') format('woff'),         url('http://ravisharma.ml/mailer1/fonts/GothamLight.ttf') format('truetype'),         url('http://ravisharma.ml/mailer1/fonts/GothamLight.svg#GothamLight') format('svg');    font-weight: normal;    font-style: normal;}
    @media screen{
  body {
    font-family: 'Open Sans', Arial, sans-serif !important;
  }
}

}   @media screen and (max-width: 639px){
        #main_table{
            width:100% !important;
            display:block;
        }

}   @media screen and (max-width: 639px){
        h1{
            font-size:20px !important;
        }

}   @media screen and (max-width: 639px){
        h2{
            font-size:14px !important;
        }

}   @media screen and (max-width: 639px){
        p{
            font-size:10px !important;
        }

}   @media screen and (max-width: 639px){
        h3{
            font-size:14px !important;
        }

}

</style>

</head>

<body style="margin: 0;padding: 0;">
    <table id="main_table" align="center" cellpadding="0" cellspacing="0" border-spacing="0" style="width: 640px;border-collapse: collapse;font-family: Arial, Helvetica, san-serif;">
        <tr>
            <td class="td_50" style="width: 50%;">
                <a href="#" style="text-decoration: none;color: #b24761;"><img src="https://gallery.mailchimp.com/eb9c4a4284960321518684c4d/images/432620e4-25dc-4f16-a784-9f67b629e72a.jpg" alt="virgin atlantic" style="width: 100%;float: left;display: block;margin: 0 auto;"></a>
            </td><!--title ends-->

            <td class="td_50" style="width: 50%;">
                <a href="#" style="text-decoration: none;color: #b24761;"><img src="https://gallery.mailchimp.com/eb9c4a4284960321518684c4d/images/cd675339-2051-4c40-b4c2-0101af8dbda4.jpg" alt="virgin atlantic" style="width: 100%;float: left;display: block;margin: 0 auto;"></a>
            </td><!--title ends-->
        </tr><!--table row 1 ends-->

        <tr>
            <td colspan="2" class="td_100" style="width: 100%;">
                <img src="https://gallery.mailchimp.com/eb9c4a4284960321518684c4d/images/e714b3ca-2b83-4241-8e81-bda71a259254.jpg" alt="virgin atlantic" style="width: 100%;float: left;display: block;margin: 0 auto;">
            </td><!--title ends-->

        </tr><!--table row 1 ends-->

        <tr>
            <td colspan="2" class="content td_100" style="width: 100%;padding: 20px;background: #fff;">
                <h1 style="font-family: 'Open Sans', Arial, sans-serif; 'Margin:0;padding: 10px 0 25px 0;width: 100%;float: left;font-size: 25.5px;">BUSINESS IS AN ADVENTURE MAKE IT EPIC.</h1>
                <h2 style="Margin: 0;padding: 0;width: 100%;float: left;font-size: 16px;color: #111;line-height: 24px;">Are you heading London or US anytime soon? We have everything you expect in business, but in Premium Economy</h2>
                <ul style="Margin: 0 ;padding: 0;width: 100%;float: left;padding-top: 20px;">
                    <li style="width: 100%;float: left;list-style: none; Margin:0; padding:8px 0; line-height:normal;"><p class="p1" align="left" style="display: inline;font-size: 13px;color: #111;Margin:0; width: 3%;float: left; line-height:normal;">- </p><p class="p2" align="left" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 97%;float: left; line-height:normal;">Speed through the airport thanks to special priority checkin, bag drop and boarding.</p></li>
                    <li style="width: 100%;float: left;list-style: none; Margin:0; padding:8px 0; line-height:normal;"><p class="p1" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 3%;float: left; line-height:normal;">- </p><p class="p2" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 97%;float: left; line-height:normal;">Extra baggage allowance of 3 cases upto 23kg each..</p></li>
                    <li style="width: 100%;float: left;list-style: none; Margin:0; padding:8px 0; line-height:normal;"><p class="p1" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 3%;float: left; line-height:normal;">- </p><p class="p2" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 97%;float: left; line-height:normal;">Recline on your luxurious wide leather seat with headrest one of the biggest in its class.</p></li>
                    <li style="width: 100%;float: left;list-style: none; Margin:0; padding:8px 0; line-height:normal;"><p class="p1" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 3%;float: left; line-height:normal;">- </p><p class="p2" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 97%;float: left; line-height:normal;">Relax preflight with glass of welcome bubbly and newspaper in our dedicated cabin.</p></li>
                    <li style="width: 100%;float: left;list-style: none; Margin:0; padding:8px 0; line-height:normal;"><p class="p1" align="left" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 3%;float: left; line-height:normal;">- </p><p class="p2" align="left" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 97%;float: left; line-height:normal;">Enjoy your choice of three delicious main dishes including a vegetarian option, upgraded with china crockery,                   
                    cutlery and linen.</p></li>
                    <li style="width: 100%;float: left;list-style: none; Margin:0; padding:8px 0; line-height:normal;"><p class="p1" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 3%;float: left; line-height:normal;">- </p><p class="p2" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 97%;float: left; line-height:normal;">Snooze or freshen up on night flights with your Relax Pack.</p></li>
                    <li style="width: 100%;float: left;list-style: none; Margin:0; padding:8px 0; line-height:normal;"><p class="p1" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 3%;float: left; line-height:normal;">- </p><p class="p2" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 97%;float: left; line-height:normal;">Stay connected with inseat power and onboard WIFI.</p></li>
                    <li style="width: 100%;float: left;list-style: none; Margin:0; padding:8px 0; line-height:normal;"><p class="p1" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 3%;float: left; line-height:normal;">- </p><p class="p2" style="display: inline;font-size: 13px;color: #111;Margin:0;width: 97%;float: left; line-height:normal;">Help yourself to tempting snacks or stretch your leg at our social space called Wander Wall.</p></li>
                </ul>

                <h3 style="width: 100%;float: left; Margin:0; padding-top: 35px;color: #111;font-size: 16px;">Book now on <a href="http://www.virgin-atlantic.com/us/en.html" style="text-decoration: none;color: #b24761;">www.virginatlantic.com</a></h3>
            </td><!--title ends-->

        </tr><!--table row 1 ends-->
    </table><!--table ends-->
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Muh*_*kur 12

Gmail 不支持@font-face或自定义网络字体。

gmail 和大多数网络邮件客户端支持的安全字体是：

宋体
世纪哥特式
快递新
加拉蒙德
乔治亚州
黑体
影响
露西达
英语字体格式一种
塔霍马
投石机
韦尔达纳

您应该选择上述字体以支持大多数网络邮件客户端，否则它将返回为默认字体。

Answer 2

the*_*pio -1

您应该能够像在普通网页中使用它们一样使用它。因此，首先您只需将托管的网络字体包含在<head>文档中：

\n\n

<head>\n  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">\n</head>\n

Run Code Online (Sandbox Code Playgroud)\n\n

Outlook 可能存在问题，因此您可以为 Outlook 设置加载字体的条件，如下所示：

\n\n

<head>\n  <!--[if !mso]><!-- -->\n    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">\n  <!--<![endif]-->\n</head>\n

Run Code Online (Sandbox Code Playgroud)\n\n

然后你只需在 CSS 中正常设置字体即可：

\n\n

h1, h2, h3, h4, h5, h6 {\n  font-family: \xe2\x80\x98Open Sans\xe2\x80\x99, Arial, sans-serif !important; // Arial will be used as a fallback, in Outlook for example\n}\n

Run Code Online (Sandbox Code Playgroud)\n\n

或者内联：

\n\n

<p style="font-family: \xe2\x80\x98Open Sans\xe2\x80\x99, Arial, sans-serif;">Open Sans text</p>\n

Run Code Online (Sandbox Code Playgroud)\n

哦，我的错。我刚刚读到 Gmail 实际上并不支持网络字体。您可以在此处阅读有关网络字体支持的更多信息：https://litmus.com/blog/typography-tips-for-email-designers (3认同)

归档时间：	9 年，5 月前
查看次数：	19805 次
最近记录：	4 年，1 月前