在 HTML 电子邮件模板中使用 Web 字体的困难

如何解决在 HTML 电子邮件模板中使用 Web 字体的困难

我正在为工作设计一些 HTML 电子邮件模板，并且在尝试合并网络字体时得到了不同的结果。

我一直在使用 Outlook、Gmail 和 Yahoo Mail 来测试我的模板。 Outlook 和 Gmail 似乎在网络上显示字体，但在移动设备上不显示。雅虎似乎忽略了两者的字体。当我使用 font-weight 属性时，这三个似乎都忽略了。

作为参考，我正在尝试使用 Josefin Sans 和 Lato Google 字体。

这是我用来获取字体的内容：

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Lato:wght@300;400;700;900&display=swap" rel="stylesheet">

这是我尝试使用字体和所需字体粗细的示例：

<td style="font-family: 'Lato',sans-serif; font-weight: 300;">
      Testing Lato Font
</td>

我想知道是我做错了什么还是电子邮件客户端对 CSS 施加了限制？如果是后者，有什么解决办法可以考虑吗？

解决方法

根据 https://www.caniemail.com/features/css-at-font-face/ 的说法，网络字体仅适用于 Apple Mail、Mac 上的 Outlook、某些 iOS 版本上的 Outlook、三星应用程序和其他一些应用程序。 Outlook 应用和 Outlook.com 可能在某个时候进行了更新，以增加支持。

我会在那里获取该 href，在浏览器中访问它，然后仅复制 @font-face 拉丁语部分。对@font-face 的支持比链接更好，而且您需要针对 Windows 上的 Outlook 进行调整。（或者，这样看，链接或@import 方法也需要@font-face，所以也没有必要通过添加它们来使事情复杂化。）

这就是你最终会得到的：

<style>
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh7USSwiPGQ.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
mso-font-alt: Arial;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+FFFD;
mso-font-alt: Arial;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+FFFD;
mso-font-alt: Arial;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh50XSwiPGQ.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+FFFD;
mso-font-alt: Arial;
}
</style>

请注意每个声明中的 mso-font-alt: Arial; - 因此 Outlook for Windows 不会默认为 Times New Roman（它不支持 Web 字体）。

现在，Google 仅支持 Google Sans 和 Roboto 字体，因此您可能希望在您的字体系列中执行此操作：font-family: 'Lato',Roboto,Arial,sans-serif; font-weight: 300;

始终确保该列表中有网络安全字体（例如 Arial）。这是一种几乎每个人都已经安装的字体。无衬线字体适用于那些甚至没有的 0.1%，但您不希望它像 Times New Roman 一样默认为衬线字体。