移动的html文件不在@字体面不工作

我把我的html文件“index.html”移到了名为“html”的html文件夹中，现在我的css导入字体的规则不起作用了，只有一个例外。我有三个，一个是直接从谷歌api，而其他两个是在我的电脑上。在我移动html文件之前，它们都工作得很好。我试过一些我认识的人提出的建议，把它标为“重要”，甚至修改引号和大写字母。我已确保每个文件的foont族与文件名相同，但除非我将html文件从文件夹中移除到其原始位置，否则不会有任何内容

请帮忙。我会非常感激的

@font-face { 
    font-family: still time; 
    src: url ('../fonts/still time.ttf'); 
} 

@font-face { 
    font-family: "The Next Font" !important; 
    src: url('www.dafont.com/the-next-font.font');
 } 

@font-face { 
     font-family: "Vintage Avalanche" !important; 
     src: url('../fonts/Vintage Avalanche.otf');
 }

---

。/

表示字体试图从文件所在文件夹的上一级文件夹加载。最初，您使用了一个

。/

，这意味着

字体

文件夹和

index.html

文件所在的文件夹是同级的：

root/fonts/[YOUR FONTS]
root/[SIBLING]/index.html

。/fonts/

尝试从

index.html

所在的文件夹中导航出来，然后进入

fonts

文件夹，在该文件夹中可以找到字体。现在您有了一个辅助

html

文件夹，您的html文件现在更深了一层：

[ROOT]/fonts/[YOUR FONTS]
[ROOT]/[SIBLING]/html/index.html

因此，为了引用字体，您需要向上移动两级而不是一级，以查找

字体
文件夹，方法是添加额外的
。/
以将目录移到更高的位置：

@font-face {
    font-family: still time;
    src: url ('../../fonts/still time.ttf');
}
@font-face {
    font-family: "The Next Font" !important;
    src: url('www.dafont.com/the-next-font.font');
}
@font-face {
        font-family: "Vintage Avalanche" !important;
    src: url('../../fonts/Vintage Avalanche.otf');
}

www.dafont.com
字体起作用，因为您提供了一个绝对URL，而不是相对URL。另外，请注意，字体面是相对于CSS的，因此如果使用外部CSS文件，它们将相对于CSS文件，而不是HTML文件

编辑

根据您的评论，您可以使用以下结构将CSS保存在外部CSS文件中：

practice/fonts/[YOUR FONTS]
practice/css/style.css
practice/html/index.html

正如我在相对路径中提到的，字体是相对于CSS加载的
practice/css/style.css
与
http://[SITE]/practice/css/style.css
相关。您的字体位于http://code>http://[SITE]/practice/FONT/[FONT.EXT]
，因此您需要升级一级：

@font-face {
    font-family: still time;
    src: url ('../fonts/still time.ttf');
}
@font-face {
    font-family: "The Next Font" !important;
    src: url('www.dafont.com/the-next-font.font');
}
@font-face {
        font-family: "Vintage Avalanche" !important;
    src: url('../fonts/Vintage Avalanche.otf');
}

如果有的话，您的字体以前不应该工作。考虑到它们确实有效，您可以通过删除前导的
。/
，来引用字体：

@font-face {
    font-family: still time;
    src: url ('fonts/still time.ttf');
}
@font-face {
    font-family: "The Next Font" !important;
    src: url('www.dafont.com/the-next-font.font');
}
@font-face {
        font-family: "Vintage Avalanche" !important;
    src: url('fonts/Vintage Avalanche.otf');
}

或者，为了确保它们无论CSS/HTML文件位于哪里都能正常工作，您可以相对于根引用它们，如下所示：

@font-face {
    font-family: still time;
    src: url ('/fonts/still time.ttf');
}
@font-face {
    font-family: "The Next Font" !important;
    src: url('www.dafont.com/the-next-font.font');
}
@font-face {
        font-family: "Vintage Avalanche" !important;
    src: url('/fonts/Vintage Avalanche.otf');
}

希望这有帮助：）
由于您将html移动到了不同的文件位置，它无法再访问正确的文件

更改用于访问文件的链接/路径。

如果您将html放在文件夹中，请尝试在路径/链接的开头使用“./”来表示您希望从当前所在的文件夹向上移动

我现在正在尝试，但我没有移动字体，字体在它自己的文件夹中，而不是html。这是文件夹布局的屏幕截图。啊，这就解释了。字体是相对于CSS的，而不是相对于HTML的。你现在要找的不是
。/
。我将更新我的答案以涵盖此内容。更新我的答案以涵盖您的评论；现在应该可以解决这个问题了。这个网站是不是我把它改成的html名称https:///index.html/practice/... 没有发生任何事情然后我将其更改为“fonts/[font]没有发生任何事情然后/fonts/[font]没有发生任何事情我可以看到css文件、html文件和字体的文件夹层次结构。还有一件事，如何调用css文件？这就是文件夹的布局，我叫我的css style.css，因为它只是一种练习，你叫它“style.css”，而不是“./css/style.css”？嗯？是的，它在css文件夹中，技术上会../css/style.css