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

使用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;

}

感谢所有答案！

Answer 2

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

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

然后你需要像这样更新网址

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

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

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

然后你需要像这样更新网址

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

Answer 3

尝试在路径前添加./。

Answer 4

它应该工作：）

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

/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文件夹中的文件的拼写（大写/小写）。
当您在浏览器中监视样式时，您看到了什么？您是否看到应该应用foundrysterling-mediumcyRg样式？它不是被另一种风格重载了吗？
尝试在浏览器中窥探网络交换。浏览器是否加载了字体文件？状态码是200吗？如果不行，当您在浏览器中尝试http://localhost:8080/{your app context}/resources/css/fonts/fostmdcy-webfont.woff2时会发生什么？

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

4 个答案: