nuxt js를 사용하여 모든 페이지에 글꼴을 삽입하는 방법

nuxt js를 사용하여 모든 페이지에 글꼴을 삽입하는 방법

nuxt.config.js의 글로벌 설정에 구글 폰트를 삽입하기만 하면 됩니다.

 link: [
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
    ]

그러나 이 글꼴을 모든 페이지에 적용하는 방법.

새로운 답변

@nuxt/google-package 사용:https://google-fonts.nuxtjs.org

사용하기 쉽고 글꼴 다운로드 등 다양한 옵션을 지원합니다.

---

구답

앱에 글꼴을 포함시켜 서비스를 제공하려는 경우

https://fonts.google.com/specimen/Roboto?selection.family=Roboto 에서 글꼴을 다운로드합니다(드로어를 열고.zip파일)을 클릭합니다.

1. .zip의 내용물을 로 압축 해제한다../assets/fonts/*(존재하지 않는 경우 작성).
2. 만들다./assets/fonts/roboto.css그 안에 다음 항목을 배치합니다.

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

(이 CSS는 https://fonts.googleapis.com/css?family=Roboto)에 접속하면 찾을 수 있습니다.

그럼 바꿉니다.nuxt.config.jsCSS 파일을 포함하다css속성:

module.exports = {
  /*
  ** Global CSS
  */
  css: [
    '~/assets/fonts/roboto.css'
  ]
}

그럼 네가 신청해font-family: 'Roboto', sans-serif;텍스트 요소로 이동합니다.

---

모든 페이지의 글꼴 사용

작성하다./assets/css/styles.css파일에는 다음 내용이 포함되어 있습니다.

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

그 후 위와 같이 CSS 파일을 에 포함됩니다.nuxt.config.js:

module.exports = {
  css: [
    '~/assets/fonts/roboto.css',
    '~/assets/css/styles.css'
  ]
}

다른 글꼴, 아이콘, 프레임워크 css 등의 자산에도 동일하게 적용됩니다.

빨리

nuxt.config.js fi에서

head: {
  ...
  ...
  link: [
    {
      rel: 'icon',
      type: 'image/x-icon',
      href: '/favicon.ico'
    },
    {
      rel: 'stylesheet',
      href: 'https://fonts.googleapis.com/css?family=Lato:400,700'
    }
  ]
}

그리고 레이아웃/기본값.vue 또는 사용 중인 다른 레이아웃 파일 스타일 태그 추가

<style scoped>
#app {
  font-family: 'Lato', sans-serif;
}
</style>

이렇게 간단하다

1. Google 글꼴로 이동하여 글꼴 스타일을 선택합니다(예: Montserrat).

2. 하다nuxt.config.js여기에 표시된 대로 글꼴 URL을 추가합니다.

export default {  
 head: {
        meta: [],
          link: [
       { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Montserrat&display=swap"'}
     ]
   }

3. nuxt 프로젝트 -> layouts 디렉토리 ->로 이동합니다.default.vue파일명 및 클래스 추가app(또는 당신이 원하는 이름)에v-app여기에 표시된 태그

 <v-app dark class="app"> 

      --your app goes here -- 

  </v-app>

4. 동일한 파일 스타일 옵션에서 위에서 정의한 클래스 본문에 다음 행을 추가합니다.

    <style>
    .app{
      font-family: 'Montserrat', sans-serif;
    }
    </style>
   

   v-app 태그에 클래스가 정의되어 있는지 확인하고 사용<style>가 아니라<style scoped>프로젝트 전체를 실시하다

다음 규칙에 따라 CSS를 업데이트합니다.

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

CSS 스타일시트가 아직 셋업되지 않은 경우 에서 새 파일을 만듭니다.assets즉, 디렉토리입니다. main.css. 그 안에 위에 코드를 넣고 저장합니다.그리고 편집nuxt.config.js다음에 이 코드 추가head오브젝트:

css: [
  '@/assets/main.css'
],

nuxt + vuetify 프로젝트에 커스텀 폰트를 추가하려고 여러 방법을 시도했지만 아무도 제대로 작동하지 않았습니다.

드디어 제가 만든global.scss…에.assets폴더 파일 및 주소 지정:nuxt.config.js:

css: ['~assets/global.scss'],

및 인global.scss파일:

@font-face {
    font-family: 'my-custom-font';
    src: local('my-custom-font'), url('path/to/font') format('truetype');
}

.v-application {   
   font-family: 'my-custom-font' !important;
}

// or 

#app { 
    font-family: 'my-custom-font';
}

이것은 올바르게 동작했다.

다음 절차를 수행할 수 있습니다. 1__usered your font는 assets 디렉토리의 구분된 파일(예: variables.scss)에서 커스텀 변수로서 사용할 수 있습니다.

$body-font-family: Roboto;
@import '~vuetify/src/styles/styles.sass';

2__그러면 nuxt.config.dlink에서 다음과 같이 머리글에 스타일시트 링크를 추가해야 합니다.

head: {
  link: [
    { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Oswald|Libre+Baskerville&display=swap' }
  ]
},

3__그러면 다음과 같이 vuetify에서 트리쉐이킹을 활성화하고 커스텀 변수를 설정해야 합니다.

vuetify: {
  customVariables: ['~/assets/variables.scss'],
  treeShake: true
},

언급URL : https://stackoverflow.com/questions/51436344/how-to-embed-font-to-all-page-with-nuxt-js