如何使用非标准字体编写电子邮件模板？答案

【问题标题】：How to code an email template with a non-standard font?如何使用非标准字体编写电子邮件模板？
【发布时间】：2020-04-13 18:06:31
【问题描述】：

我正在尝试使用 HTML 编写带有“Walkaway 字体”的电子邮件模板，但是它无法正确显示。该模板应稍后通过 MailChimp 发送。由于字体是非标准的，最好的方法是什么？

【问题讨论】：

你是怎么做的，你是怎么测试的。是什么让您认为它不起作用？
正如@U.Windl 所问...你用什么技术来声明你的字体？
还应注意，并非所有地方都支持网络字体，包括 Gmail，因此即使使用正确的电子邮件字体声明技术，也不要期望这与在网站上一样工作。
没有代码示例，很难判断你做错了什么。
这能回答你的问题吗？ Getting @font-face to work in html email

标签： html-email

【解决方案1】：

为了在网络上获得最佳效果，请务必使用 woff 或 woff2 格式。

请注意，只有 Apple Mail 和其他一些支持自定义 Web 字体。对于不支持自定义网络字体的用户，您需要备用字体。

在允许跨域请求的服务器上上传您的字体（有关如何为此设置服务器的具体细节，请参阅Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy）。

<head>
<style type="text/css">
@media screen {  
    @font-face {
        font-family: 'Walkaway';
        src: url('https://www.xyz.co.uk/webfonts/Walkaway.eot');
        src: url('https://www.xyz.co.uk/webfonts/Walkaway.eot?#iefix') format('embedded-opentype'),
             url('https://www.xyz.co.uk/webfonts/Walkaway.woff2') format('woff2'),
             url('https://www.xyz.co.uk/webfonts/Walkaway.woff') format('woff');
        font-weight:400;
        font-style:normal;
        mso-font-alt:Arial;
        }
    }
</style>
</head>
<body>
...
<p style="font-family:Walkaway,Arial,sans-serif;">Hi there</p>
...
</body>

Mso-font-alt 采用单个值，专门用于 Outlook 的后备。其他人将使用您在<p> 或其他标签中的字体系列中指定的后备。

如果您需要其他字体，例如粗体或斜体变体，请复制并粘贴整个 @font-face。然后只需相应地更改 src、字体粗细和字体样式。如果它们是相同的字体，您将为每个变体使用相同的字体系列名称（即“Walkaway”）。

【讨论】：