如何使用Single SPA导入CSS文件中的字体

Question

我正在使用带角度的Single SPA，并尝试使用src在css文件中导入字体

@font-face {
font-family: "Effra";
src: url("//example/assets/fonts/effra/Effra-BoldItalic.woff2")
format("woff2"),
url("//example/assets/fonts/effra/Effra-BoldItalic.woff")
format("woff");
}

但由于我使用的是Single SPA，所以这不起作用，所以有没有一个特定的路径可以让我进行导入？

Answer 1

在style.css文件中，通过引用路径包含字体。

@font-face {
font-family: "Oxygen";
src: local("Oxygen"), url(./assets/fonts/Oxygen/Oxygen-Regular.ttf) format("truetype");
}

在这里我添加了一个Oxygen字体。现在，您可以在组件CSS文件中使用这种字体，如下所示。

.container{
font-family: "Oxygen", Arial, Helvetica, sans-serif;
font-size: 20px;
}

最后清除浏览器缓存并重新加载。