我正在创建电子邮件传单,并且我能够为我的标题 ( <h1>
) 使用自定义字体,而不是整个页面。
这是我正在使用的代码,但是当我在 Outlook 中查看它时它似乎不起作用。这是 CSS 问题还是 Outlook 不能很好地处理代码?
我的字体文件也与我的 html 文件位于同一位置。
@font-face {
font-family:Bebas;
src:url(BEBAS__.TTF);
}
您需要给出一个绝对路径位置,这是一个简单的示例:
@font-face {
font-family:Bebas;
src:url("c:\\path\\to\\font\\BEBAS__.TTF");
}
那应该行得通。如果不尝试没有“”。
正如您所说,它是在线托管的。它不应该被压缩,因为这不起作用。如果您必须链接到文件所在的位置(一旦解压缩),请像这样:
@font-face {
font-family:Bebas;
src:url("www.yourwebsite.com/thepath/BEBAS__.TTF");
}
问题是字体路径。您必须为您的字体在电子邮件客户端上工作提供绝对路径。
例如,
src:url(BEBAS__.TTF);
应该转换成这样的东西src:url(http://www.yourdomain.com/BEBAS__.TTF);
正如 Nathan 所建议的,你需要有绝对路径,
例如
@font-face {
font-family: 'bebasregular';
src: url('BEBAS___-webfont.eot');
src: url('BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),
url('BEBAS___-webfont.woff') format('woff'),
url('BEBAS___-webfont.ttf') format('truetype'),
url('BEBAS___-webfont.svg#bebasregular') format('svg');
font-weight: normal;
font-style: normal;
}
在电子邮件中使用网络字体的最佳方式:
http://www.campaignmonitor.com/blog/post/3897/using-web-fonts-in-email
即使你会按照 Nathan 的建议为你的字体提供正确的路径,我很确定它仍然无法正常工作。
当您在标题区域中制作电子邮件布局时,这个想法根本不使用 CSS,就像您在普通 html 页面上所做的那样。问题是某些电子邮件客户端会忽略您的标题。