跨电子邮件客户端可靠地使用 'font-weight: lighter' 或'font-weight: 100'



我正在尝试用font-family: helvetica neue; font-weight: 100;制作一个标题,它在网络版上看起来很棒,但在大多数电子邮件客户端中都显示为font-weight: normal;

我正在Hubspot内工作以发送这些电子邮件。

<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="headlineOne" style="color: #000000; font-family: helvetica 
neue, 
helvetica, arial, sans-serif; font-weight: 100; font-size: 44px; text-
align: left; line-height: 44px;">It's never too early</td>
</tr>
<tr>
<td class="headlineTwo body-text" style="line-height: 41px; margin-top: 
0; font-size: 41px; text-align: right; font-weight: 200; padding-
right: 99px; font-family: helvetica neue, helvetica, arial, sans-
serif; color: #4a4646; padding-bottom: 0px;">to start saving</td>
</tr>
</tbody>
</table>

Helvetica Neue不是一个网络安全字体,所以你在大多数电子邮件客户端中看到的是Helvetica。要使用Helvetica Neue,您需要使用@import或link在<head>中创建一个链接,以使其在电子邮件中工作。您还需要链接到一个网络字体。

即使使用了webfont,Helvetica Neue也无法在Gmail或Outlook中使用。Gmail不支持网络字体,Outlook似乎忽略了名称中有空格的字体。

您发现了使用Helvetica作为HelveticaNeue的备份字体的问题,即字体具有不同的尺寸,因此当您在两个不同的客户端(如Apple Mail和Gmail)中查看电子邮件时,您会得到不同的外观。

如果你使用Font-weight: 100;,最轻的重量Neue看起来不会和Helvetica一样。如果这种变化不会影响您的电子邮件布局,那么使用Helvetica作为备用方案。否则,请尝试其他可能更符合您需求的websafe字体。例如,Lucida Grande,Trebuchet MS可能是一个更好的后备字体。

有关更多信息,请查看以下链接:

Web字体终极指南

  • https://litmus.com/blog/the-ultimate-guide-to-web-fonts

其他有用的资源:

  • https://css-tricks.com/almanac/properties/f/font-weight/
  • https://www.myfonts.com/fonts/linotype/neue-helvetica/webfont_preview.html
  • https://www.w3schools.com/cssref/css_websafe_fonts.asp
  • https://websitesetup.org/web-safe-fonts-html-css/

祝你好运。

最新更新