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

Answer 1

不幸的是，我们不能将矢量图形（无论是字体还是图像）嵌入到电子邮件中；电子邮件客户对此的支持非常差。此处更多信息：Base64 encoded image is not showing in gmail

但是我们可以使用@font-face来渲染网络字体in some email clients，但不是全部。根据要使用的字体，可以指定字体堆栈，以自定义字体开头，然后回退到类似的系统字体。像这样：

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

该电子邮件在每个电子邮件客户端中都无法达到完美的像素，但是也许不必如此吗？ More info on email typography, web fonts, and fallbacks。