Question

我的目录结构如下：

+ CSS
  + fonts
    + palanquin
      - palanquin-thin-webfont.woff
      - palanquin-thin-webfont.woff2
      - ... (other font files)

  + my-exercises
    - magazine-2.html

带有+符号的节点表示文件夹，带有-符号的节点表示文件。

在CSS\my-exercises\magazine-2.html中，我有一个文档级样式表（即<style>元素），我试图在其中加载文件夹{{1}中的palanquin-thin字体}}

但是，CSS\fonts\palanquin\函数无提示无法解析路径：

url()

或者基本上涉及父文件夹（..）的任何相对路径。

我尝试过移动字体文件并尝试不同的排列。当我将字体放在与HTML文档相同的文件夹中或其任何子文件夹中时，src: url('../fonts/palanquin/palanquin-thin-webfont.woff')函数会正确解析字体。只要存在对父文件夹的引用，就不会解析相对路径。

由于问题与文件夹层次结构有关，提供 JS Fiddler 或 Codepen 几乎没用，所以我请你下载我的github repo中的magazine-2.html文件和fonts/palanquin文件夹，并在您的计算机上进行尝试，维护现有的文件夹层次结构。

我正在制作相关的片段。

url()

Answer 1

这是因为浏览器会对file://协议施加安全措施。

每个浏览器的规则都不同，但IIRC没有允许在文档文件夹之前查找，因此，您将无法加载不是文档根的后代的资源（即{{1}在你的情况下）。

Firefox应该允许加载此文件夹中的资源，因此如果您使用的是FF，则可以尝试直接在my-exercises文件夹中设置magazine-2.html。

Chrome有更严格的规则，但也有一个CSS标志，应该利用这些限制。不确定你是否能够向上导航。

当然最好是运行自己的本地服务器。

url（）无法解析本地计算机上父文件夹的相对路径

1 个答案: