Google 글꼴을 VueJS 컴포넌트에 추가하려면 어떻게 해야 하나요?

Google 글꼴을 VueJS 컴포넌트에 추가하려면 어떻게 해야 하나요?

Google Font를 VueJS 컴포넌트로 Import하는 방법을 1시간 동안 찾아봤지만 해결 방법을 찾을 수 없었습니다.아직 아무것도 해결되지 않았습니다.기존 StackOverflow 질문도 마찬가지였습니다.제가 찾은 답은 모두 1.5살에서 2살 정도 된 것 같아요.누군가 최신 해결책을 제안해 주셨으면 합니다.

VueJS2 + Webpack + Vue-cli를 사용하고 있습니다.

가장 빠른 방법은 예를 들어 CSS 파일의 글꼴을 Import하는 것입니다.App.css모든 컴포넌트에 필요한 경우:

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

html, body {
  font-family: 'Roboto', sans-serif;
}

#app {
  font-family: 'Roboto', sans-serif;
}

Import 스테이트먼트는 Google 폰트에도 표시됩니다.

글꼴을 선택하고Embed그리고 나서.@import선택창에서 다음을 수행합니다.

Imo씨, VueJs를 사용하고 있다면 Google Fonts Webpack Plugin이 가장 적합합니다.

여기 플러그인이 있습니다. 셋업이 매우 쉽고, 매우 효과적입니다.

npm i google-fonts-webpack-plugin -D

으로 이동합니다./webpack.config.js/webpack.base.config.js다음 행을 추가합니다.

const GoogleFontsPlugin = require("google-fonts-webpack-plugin")

module.exports = {
    "entry": "index.js",
    /* ... */
    plugins: [
        new GoogleFontsPlugin({
            fonts: [
                { family: "Source Sans Pro" },
                { family: "Roboto", variants: [ "400", "700italic" ] }
            ]
        })
    ]
}

이제 VueJS 프로젝트 내 어디에서나 Google 글꼴을 사용할 수 있습니다.

저는 msqar의 답변을 추가하고 싶습니다.Google Fonts Webpack Plugin: (https://www.npmjs.com/package/google-fonts-webpack-plugin )을 사용하고 Vue CLI를 사용하는 경우 프로젝트의 루트 내에 vue.config.dll 파일을 추가할 수 있습니다.다음 Vue CLI 문서를 참조하십시오.https://cli.vuejs.org/guide/webpack.html#simple-configuration)

그런 다음 해당 파일에 코드를 추가합니다.

 const GoogleFontsPlugin = require("google-fonts-webpack-plugin");

 module.exports = {
    chainWebpack: config => {
        plugins: [
            new GoogleFontsPlugin({
                fonts: [
                    { family: "Source Sans Pro" }
                ]
            })
        ]
     }
 }

Vue에서는 로컬에서 웹 글꼴을 사용하는 좋은 예를 볼 수 없었습니다.여기 제가 사용한 것의 예가 있습니다.CSS 파일에 정의된 SAS 변수와 웹 글꼴이 앱에 글로벌하게 추가되므로 각 파일을 컴포넌트에 개별적으로 Import할 필요가 없습니다.웹 글꼴 가져오기에서는 자산 폴더 별칭 ~@/assets에 대한 구문이 서로 다릅니다.

vue.config.module

css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/assets/css/global.scss";
        `
      }
    }
  }

CSS 파일 global.scss에는 다음이 있습니다.

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('OpenSans-Regular-400'), url(~@/assets/fonts/OpenSans-Regular-400.woff) format('woff');
}

/* color variables */

$corporate-blue: #005496;

Vue3 및 CLI 사용 시

CLI를 탑재한 Vue 3에서는 fork @beyonk/google-fonts-webpack-plugin을 사용하여 글꼴을 로컬로 포함합니다.이 기능은 Vue2 및 최신 CLI 버전에서도 작동할 수 있습니다.원래 패키지는 더 이상 작동하지 않습니다.

npm i -D @beyonk/google-fonts-webpack-plugin

고객님의 고객명vue.config.js더하다

const GoogleFontsPlugin = require("@beyonk/google-fonts-webpack-plugin")

// vue.config.js
module.exports = {
    configureWebpack: {
        plugins: [
            new GoogleFontsPlugin({
                fonts: [
                    { family: "Poppins", variants: [ "500", "700" ] }
                ]
            })
        ]
    }
}

사용 안 함google-fonts-webpack-plugin패키지 또는google-fonts-pluginVue와 함께 일하지 않습니다.

사용.@importPWA를 실행하여 글꼴을 오프라인으로 사용하는 경우에도 문제가 해결되지 않습니다.

제가 사용한 솔루션은 폰트소스를 사용하는 것이었습니다.모든 구글 폰트를 갖추고 있습니다.원하는 글꼴을 실로 설치하고 SAS에 Import하기만 하면 됩니다.

Vue2에서는 vue 컴포넌트 내의 섹션에 있는 글꼴을 @import하기만 하면 됩니다.

<style>
@import url('https://fonts.googleapis.com/css?family=Proza+Libre');
h1 {
    font-family: 'Proza Libre', sans-serif;
    color: seagreen;
    font-weight: 300;
}
</style>

현재는 다음과 같이 하고 있습니다.

• 에서 를 인스톨 (npm 를를를를((((((((((((((((((((((((((((((((((( 。npm install --save typeface-source-sans-pro)
• 를 Import ( Import (( ( 。import 'typeface-titillium-web';)
• )를합니다.font-family: 'Titillium Web', sans-serif;)

이 기능을 사용하면 글꼴이 자체 호스팅된다는 점에 유의하십시오.따라서 cdn에 캐시된 글꼴은 더 이상 지원되지 않습니다.

언급URL : https://stackoverflow.com/questions/51516084/how-do-i-add-a-google-font-to-a-vuejs-component