尽管在浏览器上工作的时事通讯（GMAIL、Yahoo Mail、Outlook、Hotmail 等）中，Web 字体无法应用
[英]Web fonts fails to apply in newsletter (GMAIL , Yahoo Mail , Outlook, Hotmail etc) working on browser though
问题描述
I have a newsletter where I use web font Proxima Nova Extra Bold and Proxima Nova Alt Regular .
我有一个时事通讯，我使用网络字体Proxima Nova Extra Bold和Proxima Nova Alt Regular 。 When I open the newsletter layout on browser the font appears fine for all text.当我在浏览器上打开时事通讯布局时，所有文本的字体看起来都很好。 But when the same newsletter is opened in Gmail or Yahoo or other mail client the font is not applied to text.但是当在 Gmail 或 Yahoo 或其他邮件客户端中打开相同的时事通讯时，字体不会应用于文本。
Broswer Layout Screenshot (Font appears perfect ):浏览器布局截图（字体看起来很完美）：
Gmail Layout Screenshot (Font is not taken) : Gmail 布局截图（未采用字体）：
Here is the way I have applied the font to newsletter file : Inside <head> Tag :这是我将字体应用于通讯文件的方式：Inside <head> Tag：
<style type="text/css">
@import url("http://serverdomainname/emailtemplatefonts.css");
body{font-family:ProximaNova-AltRegular !important;}
</style>
Styling via inline css通过内联 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>
Here is the css of font file included :这是包含的字体文件的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');}
3 个解决方案
解决方案1
3 已采纳 2016-06-22 14:51:43
Many email clients do not support web fonts.许多电子邮件客户端不支持 Web 字体。 And even if they do you have to jump through quite a few hoops, like moving the style tag between head and body for example.即使他们这样做了，您也必须跳过很多圈，例如在head和body之间移动style标签。
Here is a summary on web font support for various email clients:以下是对各种电子邮件客户端的 Web 字体支持的摘要：
https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts/https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts/
Prepare for quite a few hacks and consider falling back to standard fonts (but prefer not to use images because of the limitations this places on the accessibility of your email).准备好一些黑客并考虑退回到标准字体（但不喜欢使用图像，因为这对您的电子邮件的可访问性造成了限制）。
解决方案2
1 2016-06-22 14:44:05
Gmail and other email clients will strip out the <style> tag in the HTML. Gmail 和其他电子邮件客户端将删除 HTML 中的<style>标记。 I'm not aware of any way around this.我不知道有什么办法可以解决这个问题。 If you want/need to use a custom font for a header or otherwise, the most reliable way is to insert an image of the font, unfortunately.不幸的是，如果您想/需要为标题或其他方式使用自定义字体，最可靠的方法是插入字体图像。
解决方案3
0 2016-06-24 13:02:26
Most email clients don't support web fonts, and no popular webmail services do .大多数电子邮件客户端不支持网络字体，也没有流行的网络邮件服务支持。 Even though you're referencing Proxima Nova, the font you're actually seeing in Gmail/Yahoo is the default system sans-serif (since you have no fallback fonts in your font stack)即使您引用的是 Proxima Nova，您在 Gmail/Yahoo 中实际看到的字体也是默认系统 sans-serif（因为您的字体堆栈中没有后备字体）
Web font support in email clients isn't great , so fallback system fonts are important.电子邮件客户端中的 Web 字体支持不是很好，因此后备系统字体很重要。 You can reference web fonts using the <link href=''> tag instead of @import to increase your coverage a little.您可以使用<link href=''>标签而不是@import来引用网络字体，以稍微增加您的覆盖范围。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.