IcoMoon应用程序图标字体显示为

Question

一切都很好，但当我使用./它不起作用。要调用我使用的CSS：<link rel="stylesheet" href="../../IcoMoon-App/style.css" />和它确实显示为。我在MainFolder/Albumes/Clarity_Deluxe_Edition/index.html上得到了错误，但是当在MainFolder/index.html上使用图标时，它们会很好地显示出来(请注意，这个图标的位置是<link rel="stylesheet" href="IcoMoon-App/style.css" />)。以下是我的目录的结构：

MainFolder
├index.html
├css
│└index_style.css
├IcoMoon-App
│├IcoMoon-App.eot
│├IcoMoon-App.svg
│├IcoMoon-App.ttf
│├IcoMoon-App.woff
│└style.css
└Albumes
 └Clarity_Deluxe_Edition
  ├index.html
  └css
   └index_style.css

是的，因为我更改了位置，我还更改了@字体：

@font-face {
    font-family: 'IcoMoon-App';
    src:url('IcoMoon-App.eot?xzz47n');
    src:url('IcoMoon-App.eot?#iefixxzz47n') format('embedded-opentype'),
        url('IcoMoon-App.woff?xzz47n') format('woff'),
        url('IcoMoon-App.ttf?xzz47n') format('truetype'),
        url('IcoMoon-App.svg?xzz47n#IcoMoon-App') format('svg');
    font-weight: normal;
    font-style: normal;
}

我是不是用错了“后文件夹”(../，不知道确切的名称)？还是我在改变地点的时候犯了个错误？

Answer 1

其中一个解决方案是使用不同的方式来定义您的路径。

在CSS文件中，将IcoMoon字体文件的路径更改为：

src:url('/IcoMoon-App/IcoMoon-App.eot?xzz47n');

URL开始时的/使浏览器从网站的域级别开始，然后按照我给出的示例添加URL。这将为您的IcoMoon字体文件构建一个“绝对”URL，而不管您的文件夹结构有多深。

这种方法的一个缺点是，当您在本地(例如在http://localhost/~alej27/yoursite)浏览站点时，字体可能不会出现，因为这将使浏览器在http://localhost/IcoMoon-App/IcoMoon-App.eot?xzz47n上搜索字体文件。有一些解决方法(主机文件修改和设置虚拟域)，但这不在这个问题的范围之内:)