Question

这有点奇怪。

如果我使用：

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

一切正常。但如果我下载它（我需要下载到离线工作）然后使用（是的，路径是正确的：

<link rel="stylesheet" href="../resources/css/lib/font_awesome/all.css">

我得到了

fa-solid-900.woff2无法加载资源：服务器响应状态为404（Not（Not Found）fa-solid-900.woff无法加载资源：服务器响应状态为404（未找到） fa-solid-900.ttf无法加载资源：服务器响应了状态404（未找到）

为什么cdn没有给我任何错误而另一个错误？

Web.xml中

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.woff2</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.woff</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.ttf</url-pattern>
</servlet-mapping>

Answer 1

这只是因为样式表使用字体的相对路径。您没有下载这些字体，只是样式表。因此，系统中找不到字体。

如果你需要绝对的font-face规则，这里是：

@font-face{
    font-family:Font Awesome\ 5 Brands;
    font-style:normal;
    font-weight:400;
    src:url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-brands-400.eot);
    src:url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-brands-400.woff2) format("woff2"),url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-brands-400.woff) format("woff"),url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-brands-400.ttf) format("truetype"),url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-brands-400.svg#fontawesome) format("svg")
}
@font-face{
    font-family:Font Awesome\ 5 Free;
    font-style:normal;
    font-weight:400;
    src:url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-regular-400.eot);
    src:url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-regular-400.woff2) format("woff2"),url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-regular-400.woff) format("woff"),url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-regular-400.ttf) format("truetype"),url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-regular-400.svg#fontawesome) format("svg")
}
@font-face{
    font-family:Font Awesome\ 5 Free;
    font-style:normal;
    font-weight:900;
    src:url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-solid-900.eot);
    src:url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-solid-900.woff2) format("woff2"),url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-solid-900.woff) format("woff"),url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-solid-900.ttf) format("truetype"),url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-solid-900.svg#fontawesome) format("svg")
}

Answer 2

Fontawesome 5最适合通过JS版本使用 - 它提供了更多选项......

https://use.fontawesome.com/releases/v5.0.6/js/all.js

或者您可以下载整个包并链接到相关的js文件。

导入css文件（CDN与本地）

2 个答案: