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

Question

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

但无论使用什么浏览器（IE、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;
}

Answer 1

情况一：如果结构是这样的

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

然后你需要像这样更新 url

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

情况2：如果结构是这样的

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

然后你需要像这样更新 url

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

Answer 2

尝试在您的路径前添加 ./。

Answer 3

它应该有效:)

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

/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 文件：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="resources/css/a.css" type="text/css" charset="utf-8" />
    </head>
    <body>
        <div id="container">
            <div id="header">Test</div>
        </div>
    </body>
</html>

在我的 a.css 中：

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

那么，为什么它在您的计算机上不起作用？

检查 fonts 文件夹 (uppercase/lowercase) 中文件的拼写。
当您在浏览器中窥探样式时，您会看到什么？您看到应该应用 foundrysterling-mediumcyRg 样式了吗？是不是被另一种风格重载了？
尝试在您的浏览器中监视网络交换。字体文件是否被浏览器加载？状态码 200 ?如果不正常，当您在浏览器中尝试 http://localhost:8080/{your app context}/resources/css/fonts/fostmdcy-webfont.woff2 时会发生什么？

Answer 4

由于使用了 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;

}

感谢大家的回答！

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

Where to place fonts folder for use of @font-face?

css

fonts

font-face