如何在 vuejs 和 webpack 中加载字体文件？

Posted 2023-02-22

【中文标题】如何在 vuejs 和 webpack 中加载字体文件？

【英文标题】：How to load a font file in vuejs and webpack?

【发布时间】：2019-03-19 16:16:32

【问题描述】：

我做了很多阅读，但没有一个链接告诉我如何在 vuejs 中添加字体。 这就是我在 less 文件中导入字体的方式。

@font-face 
  font-family: "Questrial";
  src: url("../../fonts/Questrial-Regular.ttf");


@font-face 
  font-family: "Galano_Grotesque_extra_Bold";
  src: url("../../fonts/Galano_Grotesque_Bold.otf");


@font-face 
  font-family: "Galano_Grotesque_Bold";
  src: url("../../fonts/Galano_Grotesque_DEMO_Bold.otf");

这是我得到的错误

错误 ./src/themes/jatango-theme/components/fonts/Galano_Grotesque_Bold.otf 1:4 模块解析失败：意外字符 '' (1:4) 您可能需要一个 适当的加载器来处理这种文件类型。 （源代码省略 这个二进制文件）

我是 VUEJS 的新手，之前没有任何 React 或 Angular 知识。 我只知道 jquery 和 javascript。所以请有人给我一个包含字体的分步指南。在此先感谢:)

【参考方案1】：

将您的字体放在public/fonts/ 文件夹中。 在css或scss中，指定以/fonts/开头的路径。

scss 示例：

$font-dir: "/fonts/";

@font-face 
  font-family: "NameFont";
  src: url("#$font-dirNameFontRegular/NameFontRegular.eot");
  src: url("#$font-dirNameFontRegular/NameFontRegular.eot?#iefix")format("embedded-opentype"),
  url("#$font-dirNameFontRegular/NameFontRegular.woff") format("woff"),
  url("#$font-dirNameFontRegular/NameFontRegular.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;

接下来，将你的 scss 导入 main.js

示例：

// eslint-disable-next-line
import styles from './assets/scss/main.scss';

---

或vue.config.js

示例：

module.exports = 
...
  css: 
    modules: true,
    loaderOptions: 
      css: 
        localIdentName: '[name]-[hash]',
        camelCase: 'only'
      ,
      sass: 
        data: '@import "~@/assets/scss/import/_variables.scss"; @import "~@/assets/scss/import/_mixins.scss";'
      ,
    ,
  ,
...

【参考方案2】：

希望这能帮助其他面临同样问题的人。出于某种原因，Vue.js 在使用 .otf 文件时会出错。我使用了.woff，现在一切正常。在您的 webpack.config.js 文件中使用以下代码：

      module.exports = function (config,  isClient, isDev ) 
            module:  rules: [  test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/, 
            loader: 'file-loader'  ] 
            return config 

并使用类似这样的方式将文件导入您的 css 文件中

 @font-face  
       font-family: "Questrial";
       src: url("../../fonts/Questrial-Regular.ttf"); 
   

【参考方案3】：

这是一个 webpack 错误。您缺少一个 webpack loader 来管理字体文件。通常我使用file-loader作为字体：

  test: /\.(ttf|otf|eot|woff|woff2)$/,
  use: 
    loader: "file-loader",
    options: 
      name: "fonts/[name].[ext]",
    ,
  ,

将此代码添加到您的 webpack config file（模块 > 规则部分）中，或者如果您使用 vue-cli 3，则添加到您的 vue.config.js 文件（配置webpack 部分）中。

【讨论】：

当我尝试执行此操作时出现此错误 -> "yarn add file-loader --save-dev" 错误运行此命令会将依赖项添加到工作区根目录而不是工作区本身，这可能不是您想要的 - 如果您真的是认真的，请通过使用 -W 标志（或 --ignore-workspace-root-check）再次运行此命令来明确说明。

yarn 是 --dev 而不是 --save-dev ?

这也是我的 webpack.config.js 文件内容 --> module.exports = function (config, isClient, isDev ) return config 你能给我要使用的确切代码吗在那里加载我的字体。这真的很有帮助

在选项中如果我需要添加多种字体怎么办？我怎么做？到目前为止，添加了一种字体，其余的都给了我同样的错误。

你的webpack.config.js 真的很短……你必须有另一个配置文件，其中包含真正的 webpack 配置