无法在 scss 中导入字体

Question

我正在尝试在我的项目中导入 google font。

这是我所期望的：

实际结果：

App.vue

<template>
  <div id="app">Luckiest Guy</div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style scoped lang="scss">
@import "./assets/scss/main.scss";

#app {
  font-family: "Luckiest Guy", "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.scss

@import '../fonts/fonts.scss';

字体.scss

@font-face {
  font-family: 'Luckiest Guy';
  src: url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
}

代码沙盒：
https://codesandbox.io/s/dazzling-frost-2mbuf?file=/src/App.vue

更新 1
我也试过用下载的otf，但是不行

字体.scss

@font-face {
   font-family: 'Luckiest Guy';
   src: url('<The relative path of the otf>');
}

更新 2

我也试过用下载的otf，但是不行

@font-face { font-family: '最幸运的人'; src: url('./LuckiestGuy-Regular.ttf'); }

代码沙盒：
https://codesandbox.io/s/dazzling-frost-2mbuf?file=/src/assets/fonts/fonts.scss

Answer 1

使用谷歌字体导入字体时，您可以使用导入 url 或下载字体。目前您正在导入包含以下内容的 css 代码：

/* latin */

@font-face {
  font-family: 'Luckiest Guy';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/luckiestguy/v11/_gP_1RrxsjcxVyin9l9n_j2hTd52.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

现在您在 @font-face src 属性中使用此代码，有 3 种方法可以解决此问题：

使用相同的网址

一种选择是使用与谷歌相同的 URL (https://fonts.gstatic.com/s/luckiestguy/v11/_gP_1RrxsjcxVyin9l9n_j2hTd52.woff2)

本地下载

另一种选择是在本地下载字体并将其保存在您的项目中，然后使用 font-face 将其导入您的 scss。您可以通过单击右上角的 download family 按钮 (https://fonts.google.com/specimen/Luckiest+Guy) 下载字体（在 google 字体上），然后您可以将这些文件放在项目中的任何位置，而不是在 src 中使用 htts://...您需要导航到该文件夹​​

使用谷歌的导入网址

最后也是最简单的选择是通过链接导入 css：

@import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap");