Question

我有一个时事通讯，我使用网络字体 Proxima Nova Extra Bold 和 Proxima Nova Alt Regular 。当我在浏览器上打开简报布局时，所有文本的字体都显示正常。但是，当在Gmail或Yahoo或其他邮件客户端中打开相同的新闻稿时，该字体不会应用于文本。

Broswer Layout屏幕截图（字体看起来很完美）：

Gmail布局屏幕截图（未采用字体）：

以下是我将字体应用于简报文件的方式：在<head>内标记：

<style type="text/css">
@import url("http://serverdomainname/emailtemplatefonts.css");
body{font-family:ProximaNova-AltRegular !important;}
        </style>

通过内联css进行样式化

<span style="padding:25px;text-align:center;display:block;font-size:14px;font-family:ProximaNova-AltRegular">Discover attractions, restaurants, nightlife, and accomodations around the world. Use specialized filters in your search to find free museums, family friendly restaurants, weird and wonderful hotels, and much more. </span>

这是包含的字体文件的CSS：

@font-face {font-family: 'ProximaNova-AltRegular';
font-weight: normal;font-style: normal;
src: url('http://sitedomain.com/assets/fonts/proxima_nova_alt/ProximaNovaAltRegular.woff2') format('woff2');}



@font-face {font-family: 'ProximaNova-Extrabold';
font-weight: normal;font-style: normal;
src: url('http://sitedomain.com/assets/fonts/proxima_nova_bold/ProximaNovaExtrabold.woff2') format('woff2');}

Answer 1

许多电子邮件客户端不支持网络字体。即使他们这样做，你也必须跳过相当多的箍，比如在style和head之间移动body标签。

以下是各种电子邮件客户端的Web字体支持摘要：

http://stylecampaign.com/blog/2015/02/webfont-support-in-email/

准备好相当多的黑客并考虑回退到图像和/或标准字体。

Answer 2

Gmail和其他电子邮件客户端将删除HTML中的<style>标记。我不知道有什么办法解决这个问题。如果您希望/需要为标题或其他方式使用自定义字体，最可靠的方法是插入字体图像，不幸的是。

Answer 3

Most email clients don't support web fonts, and no popular webmail services do。即使您正在引用Proxima Nova，您在Gmail / Yahoo中实际看到的字体是默认系统sans-serif（因为您的字体堆栈中没有后备字体）

电子邮件客户端isn't great中的Web字体支持，因此后备系统字体非常重要。您可以使用<link href=''> tag代替@import来引用网络字体，以提高您的覆盖率。

Web字体无法应用于浏览器上的新闻通讯（GMAIL，Yahoo Mail，Outlook，Hotmail等）

3 个答案: