css - 访问不同目录中的字体

Question

我在我网站的根目录中标记为“fonts.css”的 CSS 文件中有这段代码:

@font-face
{
    src:url(Fonts/Champagne%20&%20Limousines.ttf);
    font-family:'Champagne';
}

@font-face
{
    src:url(Fonts/Cicle%20Fina.ttf);
    font-family:'Ciclef';
}

我的所有字体都在根目录(“RootDirectory/Fonts”)中标有“Fonts”的文件夹中。当我尝试使用位于根目录中的 HTML/CSS 页面访问它们时，这些字体工作正常。但是，当我尝试从不在根目录(它是“RootDirectory/About”)中的页面访问它们时，字体不起作用。我有一些页面的 HTML 不能像这样工作(链接到“fonts.css”文件):

<link rel="stylesheet" href="../fonts.css" />

应该可以吧？这不可能是打字错误，因为我直接从字体正常的第一页复制了新的 HTML 和 CSS。

附言这是新页面中唯一不起作用的东西，图像和其他一切都工作正常。

Answer 1

除非您知道自己在做什么，否则您应该通过指定从文档根目录开始的整个路径来为本地 url 设置根目录。这是通过在 url 前加一个斜线来完成的。

所以..

src:url(Fonts/Champagne%20&%20Limousines.ttf); /*and*/
src:url(Fonts/Cicle%20Fina.ttf);

成为...

src:url(/Fonts/Champagne%20&%20Limousines.ttf); /*and*/
src:url(/Fonts/Cicle%20Fina.ttf);

还有……

<link rel="stylesheet" href="../fonts.css" />

变成...

<link rel="stylesheet" href="/fonts.css" />

前导斜杠表示它是相对于网站文档根目录的。这也意味着它将在您的网站上运行。这样可以更轻松地重用和重组您的代码。