在 Keycloak 的自定义主题中引用字体

Question

我有一个从基本主题派生的自定义主题，并尝试在样式表中引用自定义字体。由于某种原因，我无法让它发挥作用。我还没有\xe2\x80\x99t找到任何涉及字体的文档或示例，所以我做了一些尝试和错误。

\n

文件结构：

\n

\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 theme/\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 my-theme/\n        \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 login/\n        \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 *.ftl\n        \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 messages/\n        \xe2\x94\x82   \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 *.properties\n        \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 theme.properties\n        \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 common/\n        \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 resources/\n        \xe2\x94\x82       \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 css/\n        \xe2\x94\x82       \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 my-style.css\n        \xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 fonts/\n        \xe2\x94\x82           \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 font-name.woff\n        \xe2\x94\x82           \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 font-name.woff2\n        \xe2\x94\x82           \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 font-name.ttf\n        \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 login\n

\n

文件主题.属性：

\n

parent=base\nimport=common/my-theme\nstyles=css/my-style.css\n

\n

文件 my-style.css：

\n

[...]\n@font-face {\n    font-family: "font-name";\n    font-style: normal;\n    font-weight: 400;\n    src: font-url("../fonts/font-name.woff2") format("woff2"),\n    font-url("../fonts/font-name.woff") format("woff"),\n    font-url("../fonts/font-name.ttf") format("truetype");\n}\nbody {\n    font-family: font-name !important;\n}\n[...]\n

\n

我必须在 my-style.css 中定义的路径是什么？我尝试了各种变体，甚至将字体直接复制到 css 目录中。一切都没有成功。

\n

Answer 1

解决方案实际上是在样式表中替换font-url为，因为没有有效的 CSS：urlfont-url

/*...*/
@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;
}
/*...*/