我尝试了几件事,包括包裹css.有关如何获取HTML电子邮件Outlook 2010使用webfont而不是默认为预安装字体的任何想法？
以下是我尝试过的一些内容:
<style type="text/css">
@font-face {
font-family: 'thegirlnextdoor';
src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot'); /* IE9 Compat Modes */
src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.woff') format('woff'), /* Modern Browsers */
url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.ttf') format('truetype'), /* Safari, Android, iOS */
url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.svg') format('svg'); /* Legacy iOS */
}
</style>
Jos*_*son 21
以下技术不需要重复使用条件注释.我对此进行了广泛的测试:
像往常一样内联您的Web安全字体系列,但在元素上有一个额外的类名.(如果您使用的是自动CSS内联器,则可以使用.webfont类名使用其余CSS指定Web安全字体.)
<td style="font-family: arial, sans-serif;" class="webfont">Text</td>
在<head>,使用您的webfont覆盖Web安全字体系列,如下所示:
<style type="text/css">
@import url(http://mysuperjazzywebfont.com/webfont.css);
@media screen { /* hides this rule from unsupported clients */
.webfont {
font-family: "Super Jazzy Webfont", arial, sans-serif !important;
}
}
</style>
注意:.webfont在简单@media screen查询中包装类只会阻止Outlook 07,10和13错误地使用Times New Roman而不是您的后备字体.参考
这些客户端显示Web字体:
@media)以下Outlook版本获得Arial:
......还有许多其他更可预测的客户获得Arial.
Joh*_*ohn 14
Outlook '03,'07,'10和'13不支持webfonts.展望'00和'11做.
你还必须留意后备.如果您在堆栈中放入带引号的字体声明或webfont,则不支持的Outlook版本将恢复为Times New Roman,完全忽略您的字体堆栈.经过多次测试,这似乎是所有客户的最佳解决方案.
将它放在标题样式标记中:
@import url(http://fonts.googleapis.com/css?family=Lobster);
像这样使用它:
<font style="font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #000000;">
<!--[if (!mso 14)&(!mso 15)]><!--><font style="font-family: Lobster, 'Lobster', Arial, Helvetica, sans-serif; font-size: 18px; color: #000000;"><!--<![endif]-->
Your text here
<!--[if (!mso 14)&(!mso 15)]><!--></font><!--<![endif]-->
</font>
这应该在支持webfonts的客户端中工作,并在其余部分优雅地回退到字体堆栈.<td>如果您愿意,也可以在a中声明外部堆栈.
是的我知道,Lobster是一个丑陋的webfont,但它适用于测试......
Jus*_*tin -1
我个人从未尝试过这样做，但既然您已经定义了字体，我会尝试以下操作来查看它是否会被应用：
html, body{
font-family: 'thegirlnextdoor', sans-serif !important;
}
如果您对“thegirlnextdoor”有其他偏好而font-family无法正确下载，您可以将其添加到它后面，就像我添加无衬线字体系列一样。
请注意，如果在网络邮件客户端中使用它，该片段可能会产生不良影响。如果是这种情况，您将需要找到要应用它的部分。例如，仅将其应用于p标签。在大多数情况下，定义一个类并自己应用它可能是最安全的：
<style>
@font-face {
font-family: 'thegirlnextdoor';
src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot'); /* IE9 Compat Modes */
src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot? #iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.woff') format('woff'), /* Modern Browsers */
url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.ttf') format('truetype'), /* Safari, Android, iOS */
url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.svg') format('svg'); /* Legacy iOS */
}
.fancy-font {
font-family: 'thegirlnextdoor', sans-serif !important;
}
</style>
并像这样应用它：
<span class="fancy-font">My e-mail title</span>
找到此链接并浏览它后，@font-faceWord 或 Outlook 不支持该链接。如果您确实想使用该字体，很可能您必须将该字体安装到所有可以接收电子邮件的计算机上，并在未安装该字体时有一个合适的后备方案。