Vue-cli和vuetify如何与本地Roboto字体一起使用

Question

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

有人通过webpack和vue-cli生成的vuetify应用程序项目实现了这一点吗？如果是，你是如何做到的？

Answer 1

使用Vue CLI 3+Vuetify:

• 安装字体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>
  

---

编辑：用@fontsource/roboto替换typeface-roboto。看见https://www.npmjs.com/package/typeface-roboto.谢谢@ikreb。

Answer 2

首先将包typeface-roboto安装到您的项目中。

然后将其导入main.js/index.js/boot.js或其他文件：

import 'typeface-roboto/index.css';

最后，更新webpack.config.js以允许使用模块规则中的字体文件类型，即：

module: {
rules: [
//other stuff
{ test: /.(png|woff|woff2|eot|ttf|svg)$/, use: 'url-loader?limit=25000' }
]
},

字体文件类型为woff、woff2、eot和ttf。