webpack - vue.js cli 项目未加载本地字体

Question

在 vue.js 项目上加载字体似乎存在很多问题，我正在使用 webpack 构建和我的

build/webpack.base.conf.js

URL 加载器如下所示:

  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }

在我的 src 文件夹中

assets/fonts/Radomir Tinkov - Gilroy-Regular.otf

我的 App.vue 包含以下代码:

<style lang="scss">

//fonts

@font-face {
  font-family: "Gilroy";
  src: url("assets/fonts/Radomir Tinkov - Gilroy-Regular.otf") format("otf");
}

在我的终端中，出现以下错误:

未找到此相关模块:

* ./assets/fonts/Radomir%20Tinkov%20-%20Gilroy-Regular.otf in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue

如何在 vue.js 中定义正确的字体路径？

Answer 1

在我正在开发的 vuejs 项目中，

这个不起作用:

@font-face {
   font-family: 'name-of-choice';
   src: url("~@/assets/<location-to-your-font-file>/font-file-name.ttf") format('font-type');
}

这有效:

@font-face {
   font-family: 'name-of-choice';
   src: url(~@/assets/<location-to-your-font-file>/font-file-name.ttf) format('font-type');
}

而且我观察到，如果我们一次使用不带双引号的解决方案，然后添加双引号，它会再次起作用!

解决方案:尝试不使用双引号，它应该可以工作。