Question

我做了很多阅读，但是没有一个链接确切地告诉我如何在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。因此，请有人给我逐步指南以包括字体。在此先感谢：）

folder-structure

Folder-structure

Answer 1

这是一个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文件（“ configurewebpack”部分）中。

Answer 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"); 
   }

Answer 3

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

示例示例：

$font-dir: "/fonts/";

@font-face {
  font-family: "NameFont";
  src: url("#{$font-dir}NameFontRegular/NameFontRegular.eot");
  src: url("#{$font-dir}NameFontRegular/NameFontRegular.eot?#iefix")format("embedded-opentype"),
  url("#{$font-dir}NameFontRegular/NameFontRegular.woff") format("woff"),
  url("#{$font-dir}NameFontRegular/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";'
      },
    },
  },
...
}

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

3 个答案: