如何在 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 部分）时，gmail 和 Outlook 都会忽略字体部分。我在电子邮件中收到了一个二进制附件，但没有任何字体。使用字体系列“Andale”根本不起作用。

Answer 1

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

但是，我们可以在某些电子邮件客户端（但不是全部）中使用@font-face它来呈现网络字体。根据您设计时使用的字体，您可以指定一个字体堆栈，该字体堆栈以自定义字体开头，然后回退到类似的系统字体。就像是：

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

电子邮件不会在每个电子邮件客户端中都匹配像素完美，但也许不必如此？有关电子邮件排版、网络字体和后备的更多信息。