电子邮件的字体导入后备答案

【问题标题】：Font import fallback for Emails电子邮件的字体导入后备
【发布时间】：2021-04-07 09:35:59
【问题描述】：

我希望这不是重复的，我找不到类似的东西。

我不希望基本字体后退，例如：font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

我想要导入的后备。
所以我在我的电子邮件的<head> 中有这样的内容，所以如果电子邮件客户端不支持一种方法，它将采用下一种方法（到目前为止我想法）。

<style>
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: local('Poppins-Regular'), url(myFontUrl) format('woff');
}

@import url('myFontUrl');

</style>

<link href="myFontUrl" rel="stylesheet" type="text/css">

这可能是多余的，但它会像我想要的那样工作吗？如果不支持@font-face，请使用@import 等等。或者我会遇到其他我现在看不到的问题吗？

【问题讨论】：

如果您使用@font-face 方法，许多 MSO 客户端将回退到 Times New Roman，因此您也需要一个解决方法。更多关于this Litmus article的电子邮件和网络字体@

标签： html email fonts html-email

【解决方案1】：

老实说，我认为这不会有很大的不同。出于安全原因，电子邮件客户端专门阻止使用 Web 字体，而不是您访问字体 URL 的方法。

因此，无论使用哪种导入方法和您发布的代码，电子邮件客户端更有可能会阻止 Web 字体并加载您可以设置为的预定义安全字体列表之一后备。

参考这样的陈述：

我不希望基本字体后退，例如：font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

...如果电子邮件客户端专门阻止网络字体，您实际上无法选择加载或不加载什么。

但以防万一支持网络字体的电子邮件客户端出现问题 - 如果您可以说明哪些电子邮件客户端没有看到您的字体加载，这可能会有所帮助，然后我们可以帮助检查是否是字体问题或电子邮件客户端阻止问题。

【讨论】：

谢谢。我知道我需要后备。我写这个是为了表明我不是在谈论这种回退

【解决方案2】：

使用@import 对您的事业没有帮助，因为这只会加载另一个仍然必须使用@font-face 的样式表。 <link> 标签也遭遇同样的命运。

因此，就如何加载网络字体而言，使用@font-face 是最可靠的方法。

只有少数电子邮件客户端支持此功能（请参阅 https://www.caniemail.com/features/css-at-font-face/），即 Apple Mail、MacOS 上的 Outlook、Outlook iOS（仅限早期版本）、三星应用程序、Thunderbird 和一些不太流行的网络邮件。

要与 Windows 上的 Outlook 兼容，您需要使用 mso-font-alt 添加网络安全字体，如下所示：

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJfecg.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';
}

因此，如果您添加了另一个 @font-face（包括通过 @import 或 <link>）并将其添加到字体系列中，则不会添加任何内容。

您确实需要注意某些字体格式（如 woff、ttf、otf）在某些环境中受支持，而有些则不支持。我还没有测试过他们的支持，但我相信 Google Fonts 使用的 woff2 适用于上述所有功能，因此您不必担心这一点。如果您确实有其他格式，也可以像这样添加它：url('proximanova-regitalic-webfont.woff') format('woff'), url('proximanova-regitalic-webfont.ttf') format('truetype')

但是，Gmail 不同。 Gmail 仅支持 Roboto 和 Google/Open Sans。因此，如果您愿意，可以将其中之一添加到您的字体堆栈中。 IE。 font-family: "Poppins", Roboto, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

【讨论】：