[我正在尝试使用HTML使用“ Walkaway字体”编写电子邮件模板,但是它无法正确显示。该模板应稍后通过MailChimp发送。由于字体是非标准字体,最好的方法是什么?
为了在网络上获得最佳效果,请确保使用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。如果这些变体是相同的字体,则将对每个变体使用相同的字体家族名称(即“随身携带”)。