vue.js - Vue cli 和 vuetify 如何使用本地 Roboto 字体

Question

我有一个正在开发中的 Vue/Vuetify 应用程序，它是使用 VUE CLI 3.x 创建的，我想在本地提供 Roboto 字体，而不是通过 Google cdn。

有没有人通过 webpack 和 vue cli 生成的 vuetify app 项目完成了这个，如果是的话，你是怎么做到的？

Answer 1

使用 Vue CLI 3 + Vuetify:

• 安装 typeface-roboto

    npm install --save @fontsource/roboto
  

• 在 public/index.html 中，删除

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
  

• 在src/App.vue中，添加

    <style lang="sass">
      @import '../node_modules/@fontsource/roboto/index.css'
    </style>
  

---

编辑:将 typeface-roboto 替换为 @fontsource/roboto。参见 https://www.npmjs.com/package/typeface-roboto .谢谢@ikreb。