使用 Google Webfonts 时 Outlook 中的 CSS 字体堆栈替换问题 [英] CSS font stack substitution issues in Outlook when using Google Webfonts
问题描述
在 HTML 电子邮件中使用 Google Webfonts 我在 Outlook(2007、2010 等)中遇到了字体替换问题，这在合并 webfonts 之前没有发生.它会忽略字体堆栈并直接转到 Times.
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
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'>
在看到可能的 另一个答案中的解决方案，但它不起作用(我也更新了类名):
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):
除了字体尝试的解决方法:
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 会识别 !important 声明，因此我一直在努力进行更具体的选择.但是，我仍然不明白为什么会发生这种情况以及是否有更简单的解决方法.
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>
更新:
我已经尝试了答案中的建议，将 webfont 导入代码放在排除 Outlook 的条件标签中，但无济于事.
I've tried the suggestion in the answers to put the webfont import code inside conditional tags that exclude Outlook to no avail.
<!--[if !mso]><!-- -->
@import url(http://www.example.css);
<!--<![endif]-->
和
<!--[if !mso]><!-- -->
@import url(http://fonts.googleapis.com/css?family=Oxygen);
<!--<![endif]-->
更新二(解决方案):
通过提供的所有帮助，很明显许多看似小问题都可能导致此问题.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 中的 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.
我确认它正在工作，因为我能够删除用于检测 Outlook 2007 及更高版本的额外解决方法 CSS 代码，以将 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]-->
推荐答案
更新:这里是一个技术在所有版本的字体堆栈中调用带有回退的 webfonts展望打破
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 错误/限制.
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屋！
