Здравствуйте, столкнулся со следующей проблемой. Есть проект веб-сайта, есть две роли, своего рода два интерфейса взаимодействия, пока готовится проект для презентации заказчику, понадобилось разделить весь перечень страниц в соответствии с этими ролями. Проще говоря, есть корневой каталог, в нем: css, js, sass, images, fonts, role-1, role-2. Последние два каталога - каталоги с HTML страницами в зависимости от роли.
Допустим, существует файл со стилями site/css/role-1/home-page.css
в файле подключаются фонты, например:
@font-face {
font-family: 'Roboto';
src: local('Roboto Thin'), local('Roboto-Thin'), url('../../fonts/roboto/robotothin.woff2') format('woff2'), url('../../fonts/roboto/robotothin.woff') format('woff'), url('../../fonts/roboto/robotothin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
Существует HTML файл site/role-1/home-page.html с тривиальным кодом подключения стилей:
<link rel="stylesheet" type="text/css" href="../css/role-1/home-page.css">
Люди! Проблема в том, что все стили из home-page.css подключаются, но только не фонты. Фонты лежат, как обычно, в корневом каталоге в папке fonts.
Если HTML файлы хранить сразу в корневом катологе (без /role-1, или /role-2), тогда фонты подключаются нормально (разумеется с изменениями относительного url в css-файле).
Кроме того! В Opera все работает и в том и в другом сучае, не работает в FireFox. Видимо это косяк браузера. Браузер обновлял, система Ubuntu. В хроме пока посмотреть не могу.
Вопрос! Не хочется валить все страницы в корень и давать им префиксы, может быть у вас есть какие-то идеи, как можно обойти эту проблему (без использования шрифтов с google-fonts и других внешних источников).
Спасибо за внимание)
