Question

一切都很好但是当我使用../它不起作用。要调用CSS我使用：<link rel="stylesheet" href="../../IcoMoon-App/style.css" />它确实出现但是。我在MainFolder/Albumes/Clarity_Deluxe_Edition/index.html处收到错误，但是当使用MainFolder/index.html处的图标时，它们会很好地显示（请注意，此处的css位置为<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-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;
}

我使用了错误的＆＃34;后退文件夹＆＃34; （../，不知道确切的名字）？或者我在改变位置时犯了错误？

Answer 1

对此的一个解决方案是使用不同的方式来定义路径。

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

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

网址开头的/会使浏览器从您网站的域级别开始，然后完全按照我给出的示例中的显示添加URL。这将为您的IcoMoon字体文件构建一个“绝对”URL，无论您的文件夹结构有多深。

此方法的一个缺点是，当您在本地浏览网站时（例如http://localhost/~alej27/yoursite），字体可能不会显示，因为这会使浏览器在http://localhost/IcoMoon-App/IcoMoon-App.eot?xzz47n搜索字体文件。有很多方法（主机文件修改和设置虚拟域），但这不在这个问题的范围内：）

IcoMoon App图标字体显示为

1 个答案: