Vue CLI和Vuetify如何与本地Roboto字体一起使用

Question

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

有人通过webpack和vue cli生成的vuetify应用项目完成了此任务吗？

Answer 1

使用 Vue CLI 3 + Vuetify：

• 安装字体机器人

    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>
  

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。