3

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

构建/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 文件夹中，我有

资产/字体/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 中定义正确的字体路径？

4

1 回答 1

2

在我正在从事的 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');
}

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

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

于 2020-01-04T13:10:18.027 回答