Где разместить папку шрифтов для использования @ font-face?

Я хотел бы использовать шрифты моей папки шрифтов, которые находятся в папке css. Папка css находится в папке ресурсов.Где разместить папку шрифтов для использования @ font-face?

Но он не работает независимо от используемого браузера (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; 
}

источник

2015-08-31 ballidanse

Как используется 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;

}

Спасибо за все ответы!

источник

2015-09-15 13:46:22 ballidanse

случай 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('css/fonts/fostmdcy-webfont.eot')

источник

2015-08-31 09:24:59 CodeRomeos

Я на случай 1, но этот синтаксис не работает. – ballidanse

** url ('fonts/fostmdcy-webfont.eot') ** Эта строка должна быть в вашем стиле.css – CodeRomeos

Попробуйте добавить ./ перед вашей дорогой.

источник

2015-08-31 09:27:47 lastschrift

Я пробовал src: url ('./ fonts/fostmdcy-webfont.eot'); он не работает – ballidanse

Он должен работать :)

Я не мог получить шрифт вы использовали, но на основе ваших файлов, посмотрите на мою структуру:

/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 в своем браузере?

источник

2015-08-31 21:03:40

Файлы шрифтов не загружены (404 ошибки).Я попытался с другим шрифтом, и следующий URL-адрес в моем браузере загружает файл шрифта с ожидаемым контентом: http: // localhost: 8080/x/resources/css/fonts/bankgothic-webfont.ttf Ошибки, видимые в консоли: GET http: // localhost: 8080/x/javax.faces.resource/fonts/bankgothic-webfont.woff2 GET http: // localhost: 8080/x/javax.faces.resource/fonts/bankgothic-webfont.woff GET http: // localhost: 8080/x/javax.faces.resource/fonts/bankgothic-webfont.ttf 404 (OK) Являются ли ошибки из-за RichFaces? – ballidanse

В файле css частичные пути относятся к местоположению таблицы стилей, а не к вашему html-документу. Ваш css должен быть доступен на localhost: 8080/x/resources/css/myfile.css, а не на localhost: 8080/x/javax.faces.resource/css/myfile.css. Если вы в первом случае, пожалуйста, еще раз проверьте, что в вашем файле css url начинаются с 'fonts /' not '../fonts' или '/ fonts' или что-то еще. В вашем html-коде у вас есть тег ? –

И если вы строите свою войну, это каталоги 'css', 'fonts', где они должны быть? –

Где разместить папку шрифтов для использования @ font-face?

ответ

Смежные вопросы