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

问题描述 投票:-1回答:1

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

html-email
1个回答
0
投票

为了在网络上获得最佳效果,请确保使用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,font-weight和font-style。如果这些变体是相同的字体,则将对每个变体使用相同的字体家族名称(即“随身携带”)。

© www.soinside.com 2019 - 2024. All rights reserved.