Question

我创建了以下电子邮件页脚，该电子邮件页脚应该在电话号码和详细信息旁边有图标，但这些图标不会显示。它在本地工作正常，但它似乎不会引用我的外部样式表。我究竟做错了什么？我正在试着修理可能很简单的东西!!

希望你能帮忙！

http://mydigitalheroes.co.uk/footer/edward-icons.html

Answer 1

1）现在你只有图像src="email-footer-logo.jpg"的相对路径。尝试将/添加为src属性中的第一个字符。

2）查看浏览器的开发者控制台（在页面上按F12） - ＆gt; Console选项卡。你可以在那里找到所有问题。

3）关于外部样式表 - 我认为你应该下载Linea字体并像图像一样托管它们（因为CORS policy: No 'Access-Control-Allow-Origin'）

Answer 2

正如@Artur所说。打开示例Link

时，控制台会显示此错误消息

访问字体 'http://umbrellaguardians.com/footer/fonts/linea.woff'来自原产地 CORS政策已阻止“http://mydigitalheroes.co.uk”：否请求中存在“Access-Control-Allow-Origin”标头资源。原因'http://mydigitalheroes.co.uk'因此不是允许访问。

选项1

将字体上传到http://mydigitalheroes.co.uk/footer/fonts/并将 CSS 更改为：

@font-face {
  font-family: "linea";
  src:url("http://mydigitalheroes.co.uk/footer/fonts/linea.eot");
  src:url("http://mydigitalheroes.co.uk/footer/fonts/linea.eot?#iefix") format("embedded-opentype"),
    url("http://mydigitalheroes.co.uk/footer/fonts/linea.woff") format("woff"),
    url("http://mydigitalheroes.co.uk/footer/fonts/linea.ttf") format("truetype"),
    url("http://mydigitalheroes.co.uk/footer/fonts/linea.svg#linea") format("svg");
  font-weight: normal;
  font-style: normal;

}

选项2

另一种尝试是允许其他域访问字体。看起来像.htaccess（如果你使用Apache ......）

# Apache Access-Control-Allow-Origin CORS
<FilesMatch ".(eot|ttf|svg|woff)">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

没有链接到外部样式表

2 个答案: