将 Google 字体添加到 VueJS

在 VueJS 程序中，可以通过如下步骤将 Google 字体添加到项目中：

1. 在 public 目录下创建一个 fonts 文件夹，并将需要使用的 Google 字体下载到该文件夹中，例如 Inter 字体可以从 https://fonts.google.com/specimen/Inter 下载。

public/
└── fonts/
    └── Inter/
        ├── Inter-Bold.ttf
        ├── Inter-BoldItalic.ttf
        ├── Inter-Italic.ttf
        ├── Inter-Medium.ttf
        ├── Inter-MediumItalic.ttf
        ├── Inter-Regular.ttf
        ├── Inter-SemiBold.ttf
        └── Inter-SemiBoldItalic.ttf

2. 在 public 目录下创建一个 css 文件夹，并创建一个 fonts.css 文件来引用在 fonts 文件夹中的字体文件。

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Inter/Inter-Regular.ttf') format('truetype');
}

/* 定义其他字体样式 */

3. 在 VueJS 中添加 fonts.css 的引用。

<template>
  <div>
    <!-- 在这里写页面代码 -->
  </div>
</template>

<script>
export default {
  mounted() {
    // 在页面挂载时引入字体文件
    const cssLink = document.createElement('link')
    cssLink.rel = 'stylesheet'
    cssLink.href = '/css/fonts.css'
    document.getElementsByTagName('head')[0].appendChild(cssLink)
  },
}
</script>

<style>
/* 在这里写样式代码 */
</style>

现在 Google 字体已经成功添加到 VueJS 程序中，并可以在样式中使用它们了。

参考链接

• Using Fonts in Vue.js and Nuxt.js (作者：Philip Barnes)