Question

我必须缺少一些东西，相对于css文件，css内部文件链接是不是？搜索，到目前为止每个来源都说是，但是我的文件似乎不想加载字体（fontawesome）。 index.html文件加载并核心显示字体，因此我知道它正在工作；但是，加载css相对项的myfile.html页面不起作用。为了使myfile.html工作，我必须更改css文件以相对于myfile.html页面加载（或看起来是这样），所以../fonts/但这会破坏index.html页面。

由于事情的托管和完成方式，我必须保持相对的相对，否则我将只使用/fonts/，但目前这不是一个选择。

为了简短起见，我只列出了列出的示例所需的fontawesome部分

可能缺少一些简单的东西，但是我引用的所有参考文件都说它应该相对于.css文件加载。

这是文件夹/文件结构

- home
    - inc
            myfile.html
    - fontawesome
            fontawesome.min.css
            - fonts
    index.html

---- index.html ----

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="fontawesome/fontawesome.min.css" rel="stylesheet" type="text/css">
    <title>Home Page</title>
</head>
<body>
    <div><i class="fas fa-bars"></i> fun stuff here</div>
</body>
</html>

---- myfile.html ----

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../fontawesome/fontawesome.min.css" rel="stylesheet" type="text/css">
    <title>myfile</title>
</head>
<body>
    <div><i class="fas fa-bars"></i> fun stuff here</div>
</body>
</html>

---- fontawesome.min.css ----

.fa,.fab,.fal,.far,.fas{
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    display:inline-block;
    font-style:normal;
    font-variant:normal;
    text-rendering:auto;
    line-height:1
}
.fas.fa-pull-left{
    margin-right:.3em
}
.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{
    margin-left:.3em
}

@font-face{
    font-family:"Font Awesome 5 Free";
    font-style:normal;
    font-weight:400;
    src:url(fonts/fa-regular-400.eot);
    src:url(fonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),
            url(fonts/fa-regular-400.woff2) format("woff2"),
            url(fonts/fa-regular-400.woff) format("woff"),
            url(fonts/fa-regular-400.ttf) format("truetype"),
            url(fonts/fa-regular-400.svg#fontawesome) format("svg")
}
@font-face{
    font-family:"Font Awesome 5 Free";
    font-style:normal;
    font-weight:900;
    src:url(fonts/fa-solid-900.eot);
    src:url(fonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),
            url(fonts/fa-solid-900.woff2) format("woff2"),
            url(fonts/fa-solid-900.woff) format("woff"),
            url(fonts/fa-solid-900.ttf) format("truetype"),
            url(fonts/fa-solid-900.svg#fontawesome) format("svg")}

.fa,.far,.fas{
    font-family:"Font Awesome 5 Free"
}
.fa,.fas{
    font-weight:900
}

Answer 1

我现在只是从臀部射击。 :-)尝试在fontawesome.min.css中编辑路径。只需将../添加到每个URL，如下所示：

@font-face{
    font-family:"Font Awesome 5 Free";
    font-style:normal;
    font-weight:400;
    src:url(../fonts/fa-regular-400.eot);
    src:url(../fonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),
            url(../fonts/fa-regular-400.woff2) format("woff2"),
            url(../fonts/fa-regular-400.woff) format("woff"),
            url(../fonts/fa-regular-400.ttf) format("truetype"),
            url(../fonts/fa-regular-400.svg#fontawesome) format("svg")
}
@font-face{
    font-family:"Font Awesome 5 Free";
    font-style:normal;
    font-weight:900;
    src:url(../fonts/fa-solid-900.eot);
    src:url(../fonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),
            url(../fonts/fa-solid-900.woff2) format("woff2"),
            url(../fonts/fa-solid-900.woff) format("woff"),
            url(../fonts/fa-solid-900.ttf) format("truetype"),
            url(../fonts/fa-solid-900.svg#fontawesome) format("svg")}

CSS内部链接是否与CSS文件无关？

1 个答案: