如何将 link Google 字体添加到我的 Nuxt 文件中？

Question

我是 SCSS 的新手，我正在尝试将本地字体加载到我的 SCSS 文件中。

这在 CSS 文件中工作得很好，但在 SCSS 文件中它没有给出任何东西，甚至没有错误：

@font-face {
  font-family: "Cairo";
  font-weight: 400;
  font-style: normal;
  src: url(./assets/Fonts/Cairo/CairoBlock-Regular.ttf);
}

css 和 scss 文件都位于同一目录中，因此路径应该相同。我做错了什么？

Answer 1

如果您想正确加载字体，您需要在某些时候以某种方式将它们链接到您的页面。因此，为什么将 SCSS 文件放入 css property 可能是可行的方法。

nuxt.config.js

export default {
  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ['put-your-files-here']
}

否则，这里 与 Nuxt 搭配得很好。