如何在HTML电子邮件中嵌入字体

Question

我需要将一个字体文件嵌入到电子邮件中。我知道这会使邮件变得更大，但我需要它是自包含的，即不依赖于网络连接上的链接。

我目前可以使用cid方法嵌入图片，并且它可以正常工作。然而，如果我在字体上使用同样的机制，它则无法正常工作。

具体来说：

@font-face
{
    font-family: Andale;
        src: url("cid:andale_location") format('woff2');
}

当我需要进入MIME时：

 Content-Type: font/woff2
 Content-Disposition: inline
 Content-Transfer-Encoding: base64
 Content-ID: <andale_location>

 d09GMgABAAAAAMEYAA4AAAABikAAAMC7AAE....

当我收到一封包含CSS（在HTML的head部分）的电子邮件时，无论是谷歌邮件还是Outlook都会忽略font-face部分。 我会收到一个二进制附件但没有任何字体。 使用字体系列“Andale”根本不起作用。

- Leandro

Answer 1

很遗憾，我们无法将矢量图形（无论是字体还是图像）嵌入电子邮件中；电子邮件客户端对此的支持非常差。更多信息请参见：Base64编码的图像在Gmail中未显示。

但是，我们可以在某些电子邮件客户端中使用@font-face来呈现Web字体，但并非所有都支持。根据您所设计的字体，您可以指定一个以自定义字体开头并回退到类似系统字体的字体堆栈。例如：

font-family: Andale, Arial, sans-serif;

这封电子邮件在每个电子邮件客户端中可能不会完美匹配像素，但也许并不需要吗？有关电子邮件排版、网络字体和备用方案的更多信息。

- Ted Goas

---

谢谢您的回复。事实上，我需要它完美无瑕。我正在以固定的方式将等宽字体与图片结合在一起，如果不提前知道每个字母有多宽，那就不可能完成，至少不能用Javascript完成，而且电子邮件中也不允许使用脚本。这就是为什么我需要确保使用我已知的字体。我不能使用Web字体，因为如我之前所说，我必须确保它可以在没有互联网连接的情况下工作。嵌入式图像有效，至少在我测试过的范围内是有效的。 - Leandro