我记得很久以前听过,在CSS font-family属性中包含多个单词的字体名称被引用被称为"最佳实践",如下所示:
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
对于它,我尝试删除引号"Arial Narrow",Safari和Firefox没有任何问题呈现它.
那么,这个经验法则是否有任何逻辑,或者它只是一个神话？旧版浏览器的问题是否已不再适用于当前版本？我已经这么做了很长时间以至于我从未停下来思考是否真的有必要.
我已经开发了十多年的网站了,但很快就发现,在为电子邮件客户开发时,我开发网络的许多习惯都没用.这让我感到非常沮丧,所以我想我会提出一个问题,希望能够为像我这样的人发现最佳实践和必要的考虑因素,这些人可能会不时地设计gmail,outlook等.
示例: <style>...</style> vs内联CSS.
简而言之:什么从网络世界转移到电子邮件世界,什么没有.
如果你像我一样,在阅读本书结束时,你的眼睛会抽搐.我不怪你.
我们的客户要求我们开发响应式HTML电子邮件模板,其中包含两个规范:
这个问题具体是关于执行圆角.Gmail和Apple支持CSS圆角,Outlook需要矢量图形.对于其余平台,他们可以使用方形边缘.
以下是我们如何检测和执行outlook:
<!--[if mso]><v:shape>...</v:shape><![endif]-->
像魅力一样工作,甚至回到Outlook 2000.问题是,我无法弄清楚如何创建一个后备.直觉说:
<!--[if !mso]>...<![endif]-->
但它只是被大多数其他电子邮件客户端的评论完全忽略,然后完全没有从框中丢失角落.我问你,SO社区的优秀成员:是否可以为除 MSO 之外的所有平台部署标记？也许有一种更聪明的方法可以实现这一点,我没有考虑过？或者,电子邮件HTML仍然太过年轻,无法尝试这样的事情？
在HTML电子邮件中使用Google Webfonts我在Outlook(2007,2010等)中遇到了在合并webfonts之前没有出现的字体替换问题.它忽略了字体堆栈并直接进入Times.
尽管使用内联回退字体堆栈,但仍会发生这种情况.
我已经注意到之前发布的类似问题,但仅作为一般性问题,与webfonts的使用无关.以前所有的字体回退都可以正常工作.我正在使用Litmus进行电子邮件测试.
有谁知道为什么会发生这种情况？
链接到Litmus:https://litmus.com/pub/53a33c7/screenshots
最初在CSS中链接的字体如下:
<link href='http://fonts.googleapis.com/css?family=Arvo|Droid+Serif:400,700,400italic,700italic|Roboto:300' rel='stylesheet' type='text/css'>
在另一个答案中看到可能的解决方案后,我也尝试使用@ font-face和自托管文件,但它不起作用(我也更新了类名):
除了font-face尝试的解决方法:
<!--[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字体覆盖摘录:
<!--[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; …这是一个关于CSS的棘手问题.我必须发送一些风格的电子邮件.使样式在电子邮件中工作的唯一方法是在标记之后写它们(我甚至不能写一个<style type="text/css">因为邮件服务器忽略它).所以,这是我必须做的一个例子:
<div style="background: red;"></div>
例如,这是完美的.问题是我需要使用css @ font-face查询.有没有办法像这样包含它？
<div style="background: red; @font-face { font-family: 'myFont'; src: url('myURL'); }"></div>
注意:显然最后一行根本不起作用.
这是一个类似的帖子,答案如下:
@fontface可以在标签中使用吗？(用于电子邮件签名可靠性
但我不能使用外部样式表或将其复制到样式部分,因为它不起作用.
先感谢您.
所以我在我的电子邮件中使用@ font-face而Outlook 2007,2011和2013给我带来了麻烦.所以我将@ font-face CSS包装在条件<! - [if!mso]>标签中,这适用于outlook(桌面客户端)中的CSS特定样式,但这完全打破了outlook.com中的电子邮件.他们来自空白,因为没有内容!一个完全白色的虚无!
我尝试了各种形式的outlook条件标签,例如<! - [if!mso]>
以下是我目前的代码:
<!--[if gte mso 9]>
<style type="text/css">
@import url(http://image.commonsensemedia-email.org/lib/fea013707564077e77/m/5/csm-fonts.css);
</style>
<![endif]-->
以下是石蕊测试,以便您可以看到结果:
https://litmus.com/pub/a49f7b4/screenshots
这些电子邮件在outlook.com中完全为空的原因是什么？
------更新日期:2014/2/18我的解决方案------
这似乎在所有平台上都能很好地工作.一旦我从评论标签中删除了所有HTML,一切都很顺利.
<!--[if !mso]><!-->
<style type="text/css">
@import url(http://image.commonsensemedia-email.org/lib/fea013707564077e77/m/5/csm-fonts.css);
</style>
<!--<![endif]-->