在 HTML 电子邮件签名上托管自定义字体答案

【问题标题】：Hosted Custom Fonts on HTML Email Signature在 HTML 电子邮件签名上托管自定义字体
【发布时间】：2020-03-15 03:32:54
【问题描述】：

在开始之前，我是一名设计师，而不是编码员。我已经使用@font-face 成功创建了一个带有自定义托管字体的 HTML 签名，但是，一旦我发送电子邮件并收到回复，字体格式就会丢失。它默认返回 Arial 或其他。

这是我的代码，我做错了吗？我已将字体系列名称列为“sfd”。我不记得这是实际名称，还是我创建的别名。



<body>
    <style type="text/css">
    @media screen {
    @font-face {
        font-family: 'sfd';
        src: url('http://archive.friendthemagazine.com/email_signature/studiofrontdesk-regular-webfont.woff2') format('woff2'),
            url('http://archive.friendthemagazine.com/email_signature/studiofrontdesk-regular-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    }

    * {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    </style>

【问题讨论】：

不是每个客户都懒得去阅读<style>标签。有些人忽略了他们。有些人积极地将它们剥离。您可能想在设计时使用Litmus 之类的工具进行测试。
以下答案对您有用吗？

标签： html-email

【解决方案1】：

您的字体不是下载的字体。所以一旦你发送它，它确实没有了。您可以尝试下载字体，将文件放在您现在所在的目录中。并将下载字体的名称放入您的源代码中。

像这样：

@font-face { 
font-family: fontname; 
src: url('fontname.otf'); 
}

希望这有帮助！

【讨论】：

【解决方案2】：

你没有做错任何事。您使用的字体 (studiofrontdesk-regular-webfont) 是一种网络字体，只有少数设备可以读取/渲染网络字体。下面是一份给你的清单。

苹果邮件
Mac 版 Outlook
iOS

Source：2021 年 9 月 20 日更新列表

只有这些电子邮件客户端会显示 Web 字体，其余的会读取备用字体。将备用字体（Arial 等）添加到您的字体系列中。

我用于电子邮件的一种方法是使用专门用于 Outlook 的网络字体和以下代码。

<!--[if gte mso 9]>
    <style>
        table, table td{font-family:Arial, Helvetica, 'sans-serif' !important;}
    </style>
<![endif]-->

回复电子邮件时，使用用户系统上的字体或默认为 Outlook 的字体。

【讨论】：

客户也有零义务保留任何回复中的格式。
电子邮件客户端列表来自哪里？
该列表可在 Litmus 或 Acid 上的电子邮件中找到。我已经用来源更新了列表。