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

Posted 2023-02-22

【中文标题】vue.js cli 项目未加载本地字体

【英文标题】：vue.js cli project not loading local fonts

【发布时间】：2018-10-04 18:45:34

【问题描述】：

在 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 文件夹中

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

【问题讨论】：

你能试试font-face src: url(~@/assets/blah/font.otf);吗？很确定我知道你遇到的确切问题。

另外，请检查这个问题：***.com/q/45760741/691711

嘿@zero298 你上面的路径似乎已经奏效了。是否可以建立整个文件夹作为源？谢谢？

我不确定你的意思。我不认为font-face 会理解通配符。您能否详细说明您的意思？

我在网上搜索过，似乎对于每种字体样式，您都必须创建另一个“font-face”实例。我已将所有实例包含在一个单独的 ./assets/scss/_fonts.scss 文件中，我必须使用 @import '~@/assets/scss/fonts' 直接将其导入每个组件中。有没有一种重复性较低的方法？

【参考方案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');

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

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