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

Question

我正在使用带有 angular 的单一 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;
}

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