Question

我的@ font-face声明出了问题。它适用于根文件夹，但不适用于子文件夹中的html文件。在根目录中，我用

调用我的css文件

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

并在子文件夹中

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

工作正常，因为其他css声明在子文件夹中工作。但我的@ font-face声明

@font-face {
    font-family: 'sofia';
    src: url('fonts/sofiaprolight-webfont.eot');
    src: url('fonts/sofiaprolight-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/sofiaprolight-webfont.woff') format('woff'), url('fonts/sofiaprolight-webfont.svg#sofia') format('svg');
    font-weight: normal;
    font-style: normal;
}

仅在root中工作。文件夹结构就像这样

index.html
css
  fonts.css
  fonts
    sofiaporlight-webfont.eot
de
  second.html

我错过了什么吗？

Answer 1

你必须在about：config中将“security.fileuri.strict_origin_policy”更改为false 设置

Firefox Security Policy

“本地文档可以访问同一目录和子目录中的其他本地文档，但不能访问目录列表。（默认）”

Orginal Answer

这可能会导致错误，尝试更改firefox配置，如果您正在使用远程主机，则需要编辑htaccess

Answer 2

您可以尝试以下方法，因为您的字体位于fonts文件夹中，该文件夹位于css文件夹中。所以提供完整的路径并尝试。

@font-face {
font-family: 'sofia';
src: url('css/fonts/sofiaprolight-webfont.eot');
src: url('css/fonts/sofiaprolight-webfont.eot?#iefix') format('embedded-opentype'), url('css/fonts/sofiaprolight-webfont.woff') format('woff'), url('css/fonts/sofiaprolight-webfont.svg#sofia') format('svg');
font-weight: normal;
font-style: normal;

}

Answer 3

试试/ css / fonts / ...

@font-face {
    font-family: 'sofia';
    src: url('/css/fonts/sofiaprolight-webfont.eot');
    src: url('/css/fonts/sofiaprolight-webfont.eot?#iefix') format('embedded-opentype'), url('/css/fonts/sofiaprolight-webfont.woff') format('woff'), url('/css/fonts/sofiaprolight-webfont.svg#sofia') format('svg');
    font-weight: normal;
    font-style: normal;
}

Answer 4

请检查

@font-face {
    font-family: 'sofia';
    src: url('/css/fonts/sofiaprolight-webfont.eot');
    font-weight: normal;
    font-style: normal;
}

@ font-face或路径问题

4 个答案: