vuejs 및 웹 팩에 글꼴 파일을 로드하려면 어떻게 해야 합니까?

vuejs 및 웹 팩에 글꼴 파일을 로드하려면 어떻게 해야 합니까?

많이 읽었는데 vuej에서 글꼴을 추가하는 방법을 정확히 보여주는 링크가 없습니다.이렇게 해서 적은 파일의 글꼴을 가져옵니다.

@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/temes/jatango-teme/components/fonts/Galano_Grotesque_Bold.otf 1:4 모듈 해석에 실패했습니다.예기치 않은 문자 " (1:4) 이 파일 형식을 처리하려면 적절한 로더가 필요할 수 있습니다.(이 바이너리 파일에 대한 소스 코드 생략)

저는 리액션이나 앵글에 대한 사전 지식이 없는 VUEJS 초보자입니다.저는 jquery와 javascript밖에 몰라요.그래서 누가 폰트를 포함시킬 수 있는 단계별 가이드를 주세요.잘 부탁드립니다:)

글꼴을 입력하다public/fonts/폴더입니다.css 또는 sss에서 다음 문자로 시작하는 경로를 지정합니다./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;
}

다음으로 scs를 main.js로 Import합니다.

예:

// 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";'
      },
    },
  },
...
}

이것이 같은 문제에 직면한 다른 사람들에게 도움이 되기를 바랍니다.어떤 이유로 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 파일의 파일을 Import합니다.

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

웹 팩 오류입니다.글꼴 파일을 관리할 웹 팩 로더가 없습니다.일반적으로 글꼴에 파일 로더를 사용합니다.

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

웹 팩 구성 파일( module > rules 섹션) 또는 vue-cli 3을 사용하는 경우 vue.config.js 파일(configurewebpack 섹션)에 이 코드를 추가합니다.

언급URL : https://stackoverflow.com/questions/52813291/how-to-load-a-font-file-in-vuejs-and-webpack