#html #css #fonts #themes #keycloak
Вопрос:
У меня есть пользовательская тема, полученная из базовой темы, и я пытаюсь ссылаться на пользовательские шрифты в своих таблицах стилей. По какой-то причине я не могу заставить это работать. Я не нашел никакой документации или примера, в которых использовались бы шрифты, поэтому я сделал несколько проб и ошибок.
Структура файла:
└── theme/ └── my-theme/ ├── login/ │ ├── *.ftl │ ├── messages/ │ │ └── *.properties │ └── theme.properties ├── common/ │ └── resources/ │ ├── css/ │ │ └── my-style.css │ └── fonts/ │ ├── font-name.woff │ ├── font-name.woff2 │ └── font-name.ttf └── login Тема файла.свойства:
parent=base import=common/my-theme styles=css/my-style.css Файл my-style.css:
[...] @font-face { font-family: "font-name"; font-style: normal; font-weight: 400; src: font-url("../fonts/font-name.woff2") format("woff2"), font-url("../fonts/font-name.woff") format("woff"), font-url("../fonts/font-name.ttf") format("truetype"); } body { font-family: font-name !important; } [...] Какой путь я должен определить в своем стиле.css? Я перепробовал все варианты и даже скопировал шрифты непосредственно в каталог css. Все без всякого успеха.
Комментарии:
1. Все вроде нормально, вы пробовали какой-нибудь шрифт Google с
wwwтипом url, чтобы увидеть, что в целом текст получает примененный шрифт, может быть, семейство шрифтовoverridenпозже в стиле.css!important?2. Спасибо за комментарий. Я только что попробовал Roboto и Ephesis. После добавления соответствующих блоков шрифтов и изменения семейства шрифтов шрифты были загружены и работали отлично.
3. При проверке инспектора в Firefox я вижу, что используется правильный стиль (семейство шрифтов: имя шрифта !важно). Но на вкладке шрифты отображается системный шрифт по умолчанию — засечка ДежаВю в моем случае. Я думаю, это подтверждает, что таблица стилей работает, но файлы шрифтов не могут быть найдены.
4. Хорошо, значит, это проблема сервера, а не внешнего интерфейса. Попробуйте получить доступ к файлу шрифта, например, к загружаемому ресурсу, то есть
www.yourwebsite/root/theme/my-theme/common/resources/fonts/font-name.woffя думаю, что ваш сервер ограничил бы доступ к нему. Вы должны указать сведения о своем сервере и используемый внутренний язык. Также проверьте вкладку сети в инструментах разработки, если браузер привязан для доступа к шрифтам.5. Keycloak поставляется со своим собственным сервером, который основан на сервере приложений WildFly и в основном реализован на Java. Для шаблонов они используют шаблоны Freemarker и какое-то управление активами. Вот почему путь к файлам шрифтов не очевиден напрямую. Я предполагаю, что управление активами не находит мои файлы с указанным путем при обработке шаблона темы и, следовательно, не может сделать его доступным. Но я не уверен. Я также пока ничего не нашел в журналах.
Ответ №1:
Решение на самом деле состояло в том, чтобы заменить font-url на url в таблице стилей, так как font-url нет допустимого CSS:
/*...*/ @font-face { font-family: "font-name"; font-style: normal; font-weight: 400; src: url("../fonts/font-name.woff2") format("woff2"), url("../fonts/font-name.woff") format("woff"), url("../fonts/font-name.ttf") format("truetype"); } body { font-family: font-name !important; } /*...*/