如何使用 Vue CLI 3 版本在 Vuetify 中导入自定义字体

How to Import Custom Font in Vuetify Using Vue CLI 3 Version

我正在尝试在 Vueitfy 项目中包含自定义字体。 关注了许多资源，但其中 none 有效。即使使用 Vueitfy 也会覆盖我的样式 !important

在我的App.vue

<style lang="stylus">
  * {
        font-family: 'SofiaProSoftW01-Regular', Helvetica Neue, Roboto, Arial, sans-serif !important;
  }
</style>

在我的public/index.html

<link href="http://db.onlinewebfonts.com/c/47ff3156fe928e750d0468143555356f?family=SofiaProSoftW01-Regular" rel="stylesheet" type="text/css"/>

非常感谢任何帮助。

要用 Vue CLI 样式修改 Vuetify：

安装 stylus-loader 使内部 webpack 配置处理所有这些。

npm install -D stylus-loader stylus
  1. 创建一个 stylus 文件夹来存储 main.stylus 项目中的文件并将此代码放入其中：
$body-font-family = 'YourFontName';

// main.styl
@import '~vuetify/src/stylus/main';
  1. 将新的 main.styl 文件导入您的 main.js:
import "./stylus/main.styl";