Question

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

<!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>

Answer 1

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

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

Outlook可能存在问题，因此您可以像这样加载Outlook条件的字体：

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

然后你通常在CSS中设置你的字体：

h1, h2, h3, h4, h5, h6 {
  font-family: ‘Open Sans’, Arial, sans-serif !important; // Arial will be used as a fallback, in Outlook for example
}

或内联：

<p style="font-family: ‘Open Sans’, Arial, sans-serif;">Open Sans text</p>

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

1 个答案: