在电子邮件客户端中可靠地使用“font-weight:lighter”或“font-weight:100”答案

【问题标题】：Using 'font-weight: lighter' or 'font-weight: 100' reliably across email clients在电子邮件客户端中可靠地使用“font-weight:lighter”或“font-weight:100”
【发布时间】：2017-10-12 21:17:43
【问题描述】：

我想用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>

【问题讨论】：

可靠地定义，记住所有浏览器和用户代理都根据 W3C 规范将 CSS 和 HTML 显示为他们自己的解释。测试所有可能的用户代理是不可能的。

标签： html email fonts font-family

【解决方案1】：

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

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

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

如果您使用Font-weight: 100;，重量最轻的 Neue 看起来与 Helvetica 不同。如果该变化不影响您的电子邮件布局，则使用 Helvetica 作为您的后备。否则，请尝试另一种可能更符合您需求的网络安全字体。例如，Lucida Grande、Trebuchet MS 可能是更好的后备字体。

欲了解更多信息，请查看以下链接：

网络字体终极指南

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

其他有用的资源：

祝你好运。

【讨论】：