时间戳

首页 > 解决方案 > 如何使用非标准字体编写电子邮件模板？

html-email - 如何使用非标准字体编写电子邮件模板？

问题描述

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

标签： html-email

解决方案

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

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

将您的字体上传到允许跨域请求的服务器上的某个位置（有关如何为此设置服务器的具体详细信息，请参阅跨域资源共享策略已阻止加载来自源的字体）。

<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”）。

推荐阅读