网络字体无法应用于在浏览器上运行的时事通讯（GMAIL、Yahoo Mail、Outlook、Hotmail 等）答案

【问题标题】：Web fonts fails to apply in newsletter (GMAIL , Yahoo Mail , Outlook, Hotmail etc) working on browser though网络字体无法应用于在浏览器上运行的时事通讯（GMAIL、Yahoo Mail、Outlook、Hotmail 等）
【发布时间】：2016-10-24 13:30:19
【问题描述】：

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

浏览器布局截图（字体看起来很完美）：

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');}

【问题讨论】：

可能是不使用 HTTPS 的问题。您可以检查您的开发人员工具（浏览器中的 F12）是否有关于此的错误。如果这是问题，解决方案是开始使用 https。

标签： html css email webfonts newsletter

【解决方案1】：

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

以下是对各种电子邮件客户端的网络字体支持的总结：

https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts/

准备好一些技巧并考虑回退到标准字体（但不要使用图像，因为这会限制您的电子邮件的可访问性）。

【讨论】：

【解决方案2】：

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

电子邮件客户端 isn't great 中的 Web 字体支持，因此备用系统字体很重要。您可以使用<link href=''> tag 而不是@import 来引用网络字体，以稍微增加您的覆盖范围。

【讨论】：

【解决方案3】：

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

【讨论】：

emailonacid.com/blog/article/email-development/… 这是一篇旧文章，但它可能是真的，如果是这样，向 body 标签添加样式应该可以工作/
我不认为向正文标签添加样式是问题 - 无论如何这可以内联完成，例如<body style="font-family:XXX;">。问题是网络字体的@import 已被删除。谢谢你的文章，我不知道你能做到这一点。我现在刚刚测试了一下，你可以给泛型选择器添加样式，但是@import 语句不起作用。