Question

为什么font-awesome适用于localhost而不适用于web？

请帮助!!

@font-face {
  font-family: 'FontAwesome';
  src: url('font/fontawesome-webfont.eot@v=3.0.1');
  src: url('font/fontawesome-webfont.eot@#iefix&v=3.0.1') format('embedded-opentype'),
    url('font/fontawesome-webfont.woff@v=3.0.1') format('woff'),
    url('font/fontawesome-webfont.ttf@v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Answer 1

我从here找到了对此问题的修复：有一个名叫Thorst的人在页面的中间回答了这个问题。

让我感到很沮丧！

如果链接变为陈旧 - >

更改font-awesome.css

自：

src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'),
 url('../font/fontawesome-webfont.woff') format('woff'),
 url('../font/fontawesome-webfont.ttf') format('truetype'),
 url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');

要：

 src: url('../font/fontawesome-webfont.eot?#iefix')
 format('embedded-opentype'), url('../font/fontawesome-webfont.woff')
 format('woff'), url('../font/fontawesome-webfont.ttf')
 format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome')
 format('svg');

*注意：eot的格式是更改的内容。

Answer 2

如果您的字体很棒的文件位于与您的网页不同的服务器上，您可能会在浏览器中收到CORS（跨源资源共享）错误。您可以使用MaxCDN服务器或修改您的服务器（提供字体真棒文件）以包含带有字体文件的Access-Control-Allow-Origin:*标头。请参阅我对Font Awesome icons not showing in Chrome, a MaxCDN related Cross-Origin Resource Sharing policy issue

的回答

Answer 3

我从未见过使用@这样的标志。尝试在他们的位置使用问号：

@font-face {
  font-family: 'FontAwesome';
  src: url('font/fontawesome-webfont.eot?v=3.0.1');
  src: url('font/fontawesome-webfont.eot?v=3.0.1#iefix') format('embedded-opentype'),
    url('font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

在第4行，我还交换了#iefix和v=3.0.1的顺序，并删除了&。

为什么font-awesome不能在web上工作并在localhost中工作？

3 个答案: