Question

我正在使用Jetty 9托管我的Java webapp，我想自己主持fontawesome图标。但是我没有看到图标正确（它们是方形的。如果我从CDN链接，它可以正常工作

此链接有效

  <%--<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">--%>

这不是

  <link rel="stylesheet" type="text/css" href="../resources/font-awesome-4.3.0/css/font-awesome.min.css"/>

我已尝试将以下内容添加到我的web.xml

  <mime-mapping>
    <extension>otf</extension>
    <mime-type>application/x-font-opentype</mime-type>
  </mime-mapping>
  <mime-mapping>
    <extension>ttf</extension>
    <mime-type>application/x-font-truetype</mime-type>
  </mime-mapping>
  <mime-mapping>
    <extension>woff</extension>
    <mime-type>application/font-woff</mime-type>
  </mime-mapping>
  <mime-mapping>
    <extension>woff2</extension>
    <mime-type>application/octet-stream</mime-type>
  </mime-mapping>
  <mime-mapping>
    <extension>eot</extension>
    <mime-type>application/vnd.ms-fontobject</mime-type>
  </mime-mapping>
  <mime-mapping>
    <extension>svg</extension>
    <mime-type>image/svg+xml</mime-type>
  </mime-mapping>

我从IE获得的是以下

CSS3111: @font-face encountered unknown error. File:
OpenSans-Light.ttf

和Chrome

Failed to decode downloaded font:
localhost:8080/resources/theme-triton/resources/fonts/OpenSans-Light.ttf
index.jsp:1 Failed to decode downloaded font:
localhost:8080/resources/theme-triton/resources/font-awesome/fonts/fontawesome-webfont.woff2?v=4.3.0
index.jsp:1 Failed to decode downloaded font:
localhost:8080/resources/theme-triton/resources/fonts/OpenSans-Regular.ttf
index.jsp:1 Failed to decode downloaded font:
localhost:8080/resources/theme-triton/resources/fonts/OpenSans-Bold.ttf
index.jsp:1 Failed to decode downloaded font:
localhost:8080/resources/theme-triton/resources/font-awesome/fonts/fontawesome-webfont.woff?v=4.3.0
index.jsp:1 Failed to decode downloaded font:
localhost:8080/resources/theme-triton/resources/font-awesome/fonts/fontawesome-webfont.ttf?v=4.3.0
index.jsp:1 Failed to decode downloaded font:
localhost:8080/resources/font-awesome-4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0
index.jsp:1 Failed to decode downloaded font:
localhost:8080/resources/font-awesome-4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0
index.jsp:1 Failed to decode downloaded font:
localhost:8080/resources/font-awesome-4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0

回复标题

HTTP/1.1 200 OK
Content-Type: application/x-font-truetype
Last-Modified: Sun, 31 May 2015 17:30:12 GMT 
Accept-Ranges: bytes
Content-Length: 359350
Server: Jetty(9.2.10.v20150310)

请求标题

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
Cache-Control:no-cache
Connection:keep-alive
Host:localhost:8080
Pragma:no-cache
Referer:localhost:8080/wro/test.css
User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2418.0 Safari/537.36

有谁能告诉我我做错了什么/在哪里？

Answer 1

I didn't specify I was using maven to build my project. I just have to specify what file extensions that maven should not filter, if not maven will corrupt the file. It is similar to this answer https://stackoverflow.com/a/31475762/4959062

  <plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <version>2.7</version>
    <configuration>
      <nonFilteredFileExtensions>
        <nonFilteredFileExtension>woff</nonFilteredFileExtension>
        <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
        <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
        <nonFilteredFileExtension>eot</nonFilteredFileExtension>
        <nonFilteredFileExtension>swf</nonFilteredFileExtension>
        <nonFilteredFileExtension>ico</nonFilteredFileExtension>
      </nonFilteredFileExtensions>
    </configuration>
  </plugin>

Answer 2

尝试删除@ font-face {}阻止本地css中的'？v = 4.3.0'后缀。

Jetty 9 FontAwesome空图标

2 个答案: