Vue cli 和 vuetify 如何使用本地 Roboto 字体

Question

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

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

Answer 1

首先将包 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。

Answer 2

使用 Vue CLI 3 + Vuetify：

安装 typeface-roboto
```
  npm install --save typeface-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/typeface-roboto/index.css'
  </style>

Vue cli 和 vuetify 如何使用本地 Roboto 字体

Vue cli and vuetify how to use with local Roboto font

webpack

vue.js

roboto

vuetify.js