使用Google Webfonts时Outlook中的CSS字体堆栈替换问题 [英] CSS font stack substitution issues in Outlook when using Google Webfonts
问题描述
在HTML电子邮件中使用Google网络字体我遇到了在Outlook（2007,2010等）中的字体替换问题，在并入网络字体之前没有发生。它忽略字体堆栈，并直接到时间。
Using Google Webfonts in an HTML email I ran into font substitution issues in Outlook (2007,2010, etc.) that didn't occur prior to incorporating webfonts.It ignores the font stacks and goes right to Times.
这种情况发生，尽管使用内联备用字体堆栈。
This happens despite using inline fallback font stacks.
我注意到类似的问题，只是作为一般的问题，不拘泥于使用webfonts。以前所有的字体后备都能正常工作。我使用Litmus进行电子邮件测试。
I've noticed similar issues that have been posted here before, but only as a general question, not tied to the use of webfonts. Previously all of the font fallbacks worked correctly. I'm using Litmus to conduct the email testing.
有人知道为什么会发生这种情况吗？
Does anyone know why this might be happening?
链接到Litmus： https://litmus.com/pub/53a33c7 / screenshots
Link to Litmus: https://litmus.com/pub/53a33c7/screenshots
最初在CSS中链接的字体像这样：
Originally linked fonts in CSS like so:
<link href='http://fonts.googleapis.com/css?family=Arvo|Droid+Serif:400,700,400italic,700italic|Roboto:300' rel='stylesheet' type='text/css'>
我也尝试过使用@ font-face和self hosted文件，看到一个可能的解决另一个答案，但它没有工作（我更新类名称也）：
I also tried using @font-face and self hosted files after seeing a possible solution in another answer, but it didn't work (I updated class names too):
除了font-face试图解决方法：
Except from font-face attempted workaround:
<!--[if !mso]><!-->
@font-face {
font-family: 'droid_serif';
src: url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot');
src: url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.svg#droid_serif') format('svg'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.woff') format('woff'),
url('http://www.suissamesser.com/emails/rsdsa/DroidSerif-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
<!--<![endif]-->
Outlook特定的覆盖CSS似乎工作，但有优先问题。我不相信Outlook承认重要的声明，所以我一直在努力更具体的选择。
Outlook specific override CSS seems to work, but there are priority issues. I don't believe Outlook recognizes the !important declaration so I've been working towards more specific selections. However, I still don't understand why this is happening and if there is a simpler fix.
Outlook字体覆盖选项：
Outlook Font Override Excerpt:
<!--[if gte mso 9]>
<style>
/* Target Outlook 2007 and 2010 */
h1 { font-family: 'Georgia',serif !important; font-weight:normal; }
h1 a { font-family: 'Georgia',serif !important; font-weight:normal; }
h2 { font-family: 'Trebuchet MS',arial, helvetica, sans-serif; font-weight:normal; }
h3 { font-family: 'Trebuchet MS',arial, helvetica, sans-serif; }
.cover,img.cover,a.cover {
display: block;
visibility: visible;
td { font-family: 'Trebuchet MS',arial, helvetica, sans-serif; }
.droid { font-family: 'Georgia', serif; }
}
</style>
<![endif]-->
有问题的代码示例：
<td height="30" colspan="3" align="left" valign="middle" class="featured">
<h2 style="text-align: left; padding: 0; margin: 0; color: #00799f; font-family: 'Roboto',arial, helvetica, sans-serif; font-size: 21px; font-weight: 100; background: none; border-bottom: 1px solid #b1d6e2; text-decoration: none; line-height: 36px; mso-line-height-rule: exactly;">cover story</h2>
</td>
UPDATE：
<!--[if !mso]><!-- -->
@import url(http://www.example.css);
<!--<![endif]-->
AND
<!--[if !mso]><!-- -->
@import url(http://fonts.googleapis.com/css?family=Oxygen);
<!--<![endif]-->
UPDATE II（解决方案）：
UPDATE II (SOLUTION):
与所有的帮助提供它是清楚的一些看似小的问题都可能导致这个问题。 font-face方法似乎比@import更好。使webfont名称与本地字体不同可能会导致相同的问题，但这不是发生在这个特定的电子邮件。
With all the help offered it's clear a number of seemingly minor issue all could cause this problem. The font-face method seems to be preferable to @import. Having the webfont name not be the same as the local font can cause the same issue, but that's just not what was happening with this particular email.
我试过条件代码早期从Outlook <！ - [if！mso]><！ - > 隐藏webfont导入代码。
I had tried conditional code early on to hide the webfont import code from Outlook <!--[if !mso]><!--> altogether.
问题是我在head部分的CSS样式标签中做到了。只需将此代码放在自己的样式标签中，如下所示就有所不同。
The problem was I did this within a CSS style tag in the head section. Simply placing this code in its own style tag as shown below made the difference.
我确认它是工作，因为我能够删除额外的解决方法CSS代码检测Outlook 2007及更高版本的版本以将h1，h2值恢复到标准字体堆栈。
I confirmed it's working as I was able to remove the extra workaround CSS code I had used to detect for version of Outlook 2007 and greater to restore h1, h2 values to the standard font stack.
<!--[if !mso]><!-->
<style type="text/css">
@font-face {
font-family: 'oxygenlight';
src: url('http://www----/fonts/oxygen-light-webfont.eot');
src: url('http://www.----/fonts/oxygen-light-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.-----/fonts/oxygen-light-webfont.woff') format('woff'),
url('http://www.-----/fonts/oxygen-light-webfont.ttf') format('truetype'),
url('http://www.-----/fonts/oxygen-light-webfont.svg#oxygenlightlight') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
<!--<![endif]-->
推荐答案
UPDATE：这里是一个
技术
调用所有版本的字体堆栈中的字体堆栈
打破
UPDATE: Here is a technique to call webfonts with fallback to the font stack in all versions of Outlook that break
如果不是Outlook，请尝试声明您的webfont。 webfont可能对Outlook有问题，所以不调用它可能工作。值得一试...
Try declaring your webfont if NOT Outlook instead. The webfont might be problematic for Outlook, so not calling it at all might work. Worth a try...
编辑：
这个问题有发生在之前，当您第一次声明的字体在引号中时，Outlook会断开。这似乎是一个Outlook的错误/限制是不可避免的不幸的。
This issue has occured before with Outlook breaking when your first declared font is in quotes. This seems like an Outlook bug/limitation that is unavoidable unfortunately.
这篇关于使用Google Webfonts时Outlook中的CSS字体堆栈替换问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
