导入 css 文件（CDN 与本地）答案

【问题标题】：Importing a css file (CDN vs Local)导入 css 文件（CDN 与本地）
【发布时间】：2018-02-02 11:00:37
【问题描述】：

这有点奇怪。

如果我使用：

<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>

【问题讨论】：

hm... 我看到 css 正在获取 url(../webfonts/fa-brands-400.woff2)。我该如何解决这个问题以供本地使用？
你有和css文件同级目录的fonts文件夹吗？
字体文件夹在哪里？
其实不在一个档次。但字体将包含在下载中（至少应该）

标签： html css twitter-bootstrap font-awesome

【解决方案1】：

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

如果你需要绝对字体规则，这里是：

@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")
}

【讨论】：

【解决方案2】：

Fontawesome 5 最好通过 JS 版本使用 - 它提供了更多选择...

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

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

【讨论】：