如何使用非标准字体编写电子邮件模板？
Posted
技术标签:
【中文标题】如何使用非标准字体编写电子邮件模板？【英文标题】：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 【参考方案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”）。
【讨论】：
以上是关于如何使用非标准字体编写电子邮件模板？的主要内容，如果未能解决你的问题，请参考以下文章