如何在gmail中使用自定义字体？
Posted
技术标签:
【中文标题】如何在gmail中使用自定义字体？【英文标题】：How to use custom font in gmail? 【发布时间】：2017-01-01 20:01:24 【问题描述】：我们如何在邮件程序中使用自定义字体，尤其是 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" 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" 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" 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>
【问题讨论】：
不确定您要的是什么。您想自定义自己的 Gmail 界面吗？或者您想使用自定义字体向 Gmail 帐户发送邮件？这和编程有关系吗？ 是的，我想用自定义字体向 gmail 用户发送邮件。 【参考方案1】：Gmail 不支持@font-face 或自定义网络字体。
gmail 和大多数 webmail 客户端支持的安全字体是：
宋体 世纪哥特式 新快递 加拉蒙 格鲁吉亚 Helvetica 影响 露西达 新罗马时代 塔霍马 投石机 维达纳您应该选择上述字体以支持大多数网络邮件客户端，否则它将作为默认字体返回。
【讨论】：
【参考方案2】：您应该能够像在普通网页中一样使用它。因此，首先您只需在文档的<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>
【讨论】：
我已经尝试了您建议的所有方法，但仍然无法正常工作并使用 arial....我正在使用 mailchimp 发送电子邮件。 对不起，除了名称之外，我不熟悉 MailChimp。你可以这样试试吗：ericlbarnes.com/2015/03/06/mailchimp-fonts 我注意到，如果我从“inpect element”面板将“Open Sans”添加到font-family，它可以工作，但默认情况下它不存在，尽管我已经像上面那样添加了内联css......我认为 gmail 出于某种原因正在从 font-family 属性中删除“Open Sans”，并且字体在 mailchimp 中运行良好 哦，我的错。我刚刚读到 Gmail 实际上并不支持网络字体。您可以在此处阅读有关网络字体支持的更多信息：litmus.com/blog/typography-tips-for-email-designers 是的，当我读到时我也这么认为，但是当我在 gmail 中看到使用自定义字体的“uxpin”邮件程序时，我认为必须有某种方法可以做到这一点......这就是为什么这场惨败。以上是关于如何在gmail中使用自定义字体？的主要内容，如果未能解决你的问题，请参考以下文章