字体不能在不同的文件夹中工作？

Question

所以我有一个字体文件夹和一个css文件夹作为兄弟，当我引用它只有当.html文件是字体文件夹的兄弟时它才能工作的字体，但它会正确使用样式css文件。让我用这张图片清除它：

我从每个index.html引用global_style.css，并在每个index.html中获得正确的样式，但字体只适用于不在任何子文件夹中的字体...

我在root / subfolder1 / index.html

中有这个

        <link rel="stylesheet" type="text/css" href="css/global_style.css"/>

这在其他所有index.html：

        <link rel="stylesheet" type="text/css" href="../css/global_style.css"/>

我想它应该有效。

这是我的global_style.css：

@font-face{
font-family:"SourceSans";
src: url('../fonts/SourceSansPro.otf');
font-weight: normal;
font-style: normal;
}
@font-face{
    font-family:"SourceSansIt";
    src: url('../fonts/SourceSansProIt.otf');
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family:"SourceSansB";
    src: url('../fonts/SourceSansProB.otf');
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family:"AllerBld";
    src: url('../fonts/Aller_Bd.ttf');
    font-weight: normal;
    font-style: normal;
}

body {
    -webkit-font-smoothing: antialiased !important; 
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
    font-family:"SourceSans";
    font-size: 14px;
    color:white;
}

Answer 1

您始终可以使用绝对路径加载字体：

@font-face{
font-family:"SourceSans";
src: url('http://www.yoursite.com/root/subfolder1/fonts/SourceSansPro.otf');
font-weight: normal;
font-style: normal;
}
@font-face{
    font-family:"SourceSansIt";
    src: url('http://www.yoursite.com/root/subfolder1/fonts/SourceSansProIt.otf');
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family:"SourceSansB";
    src: url('http://www.yoursite.com/root/subfolder1/fonts/SourceSansProB.otf');
    font-weight: normal;
    font-style: normal;
}
@font-face{
    font-family:"AllerBld";
    src: url('http://www.yoursite.com/root/subfolder1/fonts/Aller_Bd.ttf');
    font-weight: normal;
    font-style: normal;
}

body {
    -webkit-font-smoothing: antialiased !important; 
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
    font-family:"SourceSans";
    font-size: 14px;
    color:white;
}