Css 在哪里放置字体文件夹以使用@font-face？

我想使用我的字体文件夹的字体，它在css文件夹中。css文件夹位于resources文件夹中

但无论使用什么浏览器（如chrome、firefox），它都无法工作。怎么了

我使用的是RichFaces 4.3.6

@font-face {
    font-family: 'foundrysterling-mediumcyRg';
    src: url('fonts/fostmdcy-webfont.eot');
    src: url('fonts/fostmdcy-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/fostmdcy-webfont.woff2') format('woff2'),
         url('fonts/fostmdcy-webfont.woff') format('woff'),
         url('fonts/fostmdcy-webfont.ttf') format('truetype'),
         url('fonts/fostmdcy-webfont.svg#foundrysterling-mediumcyRg') format('svg');
    font-weight: normal;
    font-style: normal;
}

---

案例1：如果结构是这样的

/resources
  /css
     style.css
     /fonts
        fontmdcy-webfont.eot

url('fonts/fostmdcy-webfont.eot')

/resources
  style.css
  /css         
     /fonts
        fontmdcy-webfont.eot

url('css/fonts/fostmdcy-webfont.eot')

然后你需要像这样更新url

/resources
  /css
     style.css
     /fonts
        fontmdcy-webfont.eot

url('fonts/fostmdcy-webfont.eot')

/resources
  style.css
  /css         
     /fonts
        fontmdcy-webfont.eot

url('css/fonts/fostmdcy-webfont.eot')

案例2：如果结构是这样的

/resources
  /css
     style.css
     /fonts
        fontmdcy-webfont.eot

url('fonts/fostmdcy-webfont.eot')

/resources
  style.css
  /css         
     /fonts
        fontmdcy-webfont.eot

url('css/fonts/fostmdcy-webfont.eot')

然后你需要像这样更新url

/resources
  /css
     style.css
     /fonts
        fontmdcy-webfont.eot

url('fonts/fostmdcy-webfont.eot')

/resources
  style.css
  /css         
     /fonts
        fontmdcy-webfont.eot

url('css/fonts/fostmdcy-webfont.eot')

---

案例1：如果结构是这样的

/resources
  /css
     style.css
     /fonts
        fontmdcy-webfont.eot

url('fonts/fostmdcy-webfont.eot')

/resources
  style.css
  /css         
     /fonts
        fontmdcy-webfont.eot

url('css/fonts/fostmdcy-webfont.eot')

然后你需要像这样更新url

/resources
  /css
     style.css
     /fonts
        fontmdcy-webfont.eot

url('fonts/fostmdcy-webfont.eot')

/resources
  style.css
  /css         
     /fonts
        fontmdcy-webfont.eot

url('css/fonts/fostmdcy-webfont.eot')

案例2：如果结构是这样的

/resources
  /css
     style.css
     /fonts
        fontmdcy-webfont.eot

url('fonts/fostmdcy-webfont.eot')

/resources
  style.css
  /css         
     /fonts
        fontmdcy-webfont.eot

url('css/fonts/fostmdcy-webfont.eot')

然后你需要像这样更新url

/resources
  /css
     style.css
     /fonts
        fontmdcy-webfont.eot

url('fonts/fostmdcy-webfont.eot')

/resources
  style.css
  /css         
     /fonts
        fontmdcy-webfont.eot

url('css/fonts/fostmdcy-webfont.eot')

---

尝试将

/

添加到路径前面。

尝试将

/

添加到路径前面。

应该有效：）

我无法获取您使用的字体，但根据您的文件，请查看我的结构：

/test-project
    /Deployed Resources
        /webapp
            /WEB-INF
            test.html
        /web-resources
            /images
            /resources
                /css
                    a.css
                    /fonts
                        lobster_1.3-webfont.eot
                        (and svg, ttf, woff, woff2... files)

和我的test.html文件：

那么，为什么它不能在你的电脑上工作呢

检查

字体

文件夹中文件的拼写（大写/小写）

当您在浏览器中监视样式时，会看到什么？您认为应该应用

foundrysterling mediumcyRg

样式吗？它不是被另一种风格超载了吗

尝试在浏览器中监视网络交换。浏览器是否加载了字体文件？状态代码是200？如果不正常，尝试

http://localhost:8080/{your app context}/resources/css/font/fostmdcy webfont.woff2

在浏览器中

它应该会起作用：）

我无法获取您使用的字体，但根据您的文件，请查看我的结构：

/test-project
    /Deployed Resources
        /webapp
            /WEB-INF
            test.html
        /web-resources
            /images
            /resources
                /css
                    a.css
                    /fonts
                        lobster_1.3-webfont.eot
                        (and svg, ttf, woff, woff2... files)

和我的test.html文件：

那么，为什么它不能在你的电脑上工作呢

检查

字体

文件夹中文件的拼写（大写/小写）

当您在浏览器中监视样式时，会看到什么？您认为应该应用

foundrysterling mediumcyRg

样式吗？它不是被另一种风格超载了吗

尝试在浏览器中监视网络交换。浏览器是否加载了字体文件？状态代码是200？如果不正常，尝试

http://localhost:8080/{your app context}/resources/css/font/fostmdcy webfont.woff2

在浏览器中

---

使用RichFaces时，URL的正确语法为：

@font-face {
font-family: 'foundrysterling-mediumcyRg';
src: url('#{resource["css:fonts/fostmdcy-webfont.eot"]}');
src: url('#{resource["css:fonts/fostmdcy-webfont.eot"]}?#iefix') format('embedded-opentype'),
     url('#{resource["css:fonts/fostmdcy-webfont.woff2"]}') format('woff2'),
     url('#{resource["css:fonts/fostmdcy-webfont.woff"]}') format('woff'),
     url('#{resource["css:fonts/fostmdcy-webfont.ttf"]}') format('truetype'),
     url('#{resource["css:fonts/fostmdcy-webfont.svg"]}#foundrysterling-mediumcyRg') format('svg');
font-weight: normal;
font-style: normal;

}

---

谢谢你的回答

使用RichFaces时，URL的正确语法为：

@font-face {
font-family: 'foundrysterling-mediumcyRg';
src: url('#{resource["css:fonts/fostmdcy-webfont.eot"]}');
src: url('#{resource["css:fonts/fostmdcy-webfont.eot"]}?#iefix') format('embedded-opentype'),
     url('#{resource["css:fonts/fostmdcy-webfont.woff2"]}') format('woff2'),
     url('#{resource["css:fonts/fostmdcy-webfont.woff"]}') format('woff'),
     url('#{resource["css:fonts/fostmdcy-webfont.ttf"]}') format('truetype'),
     url('#{resource["css:fonts/fostmdcy-webfont.svg"]}#foundrysterling-mediumcyRg') format('svg');
font-weight: normal;
font-style: normal;

}

---

谢谢你的回答

我试过src:url（'./font/fostmdcy-webfont.eot'）；它不起作用我试过src:url（'./font/fostmdcy webfont.eot'）；它不起作用URL（'fonts/fostmdcy webfont.eot'）此行应采用您的样式。cssurl（'fonts/fostmdcy webfont.eot'）此行应采用您的样式。cssFont文件未加载（404错误）。我尝试使用另一种字体，浏览器中的以下URL下载了包含预期内容的字体文件：控制台中出现的错误：GET 404（确定）是由于RichFaces导致的错误吗？在css文件中，部分路径是相对于样式表位置的，而不是相对于html文档的。您的css应该位于localhost:8080/x/resources/css/myfile.css，而不是localhost:8080/x/javax.faces.resource/css/myfile.css。如果是第一种情况，请再次检查css文件中URL是否以“字体/”而不是“../fonts”或“/fonts”或其他内容开头。在你的html代码中，你有一个标记吗？如果你构建了你的war，“css”，“字体”目录是否应该在哪里？字体文件没有加载（404错误）。我尝试使用另一种字体，浏览器中的以下URL下载了包含预期内容的字体文件：控制台中出现的错误：GET 404（确定）是由于RichFaces导致的错误吗？在css文件中，部分路径是相对于样式表位置的，而不是相对于html文档的。您的css应该位于localhost:8080/x/resources/css/myfile.css，而不是localhost:8080/x/javax.faces.resource/css/myfile.css。如果是第一种情况，请再次检查css文件中URL是否以“字体/”而不是“../fonts”或“/fonts”或其他内容开头。在你的html代码中，你有一个标签吗？如果你构建了你的war，“css”，“字体”目录应该在哪里？