nuxt webfontloader 다운로드 - nuxt webfontloader 소스 코드 다운로드

nuxt webfontloader

글꼴 다운로드

1.0.0

다운로드

Nuxt WebFontloader- 효율적인 웹 글꼴 로딩이 쉬운 적이 없었습니다!

릴리스 노트

특징

구성 요소로서 SVG를 완전히 지원합니다. Vue SFC처럼 가져 오십시오
Google/Typekit의 WebFontLoader 위에 구축되었습니다
웹 정면을 비동기로로드하여 사이트 성능을 향상시킵니다
NUXT 2 (및 NUXT 2) 지원
완전히 테스트되었습니다!

설정

프로젝트에 원사 또는 NPM을 사용하여 의존성으로 nuxt-webfontloader 추가
nuxt.config.js 의 modules 섹션에 nuxt-webfontloader 추가하십시오

 {
  modules : [
    'nuxt-webfontloader' ,
  ] ,
}

nuxt.config.js 에 webfontloader 옵션을 포함하십시오.

 export default {
  webfontloader : {
    google : {
      families : [ 'Lato:400,700' ] //Loads Lato font with weights 400 and 700
    }
  } ,
}

앱 템플릿에서 오래된 스타일 시트를 제거하거나 nuxt.config.js 헤드 부분 :

 export default {
  head : {
    link : [
      // You don't need that line anymore!
      { rel : 'stylesheet' , href : 'https://fonts.googleapis.com/css?family=Lato:400,700' }
    ]
  }
}

글꼴 디스플레이 옵션으로 Google 글꼴 추가

글꼴 디스플레이 옵션과 함께 Goggle 글꼴을 사용하고 싶다면 이것이 가능합니다.

그러나 글꼴 가족 또는 하나 이상을 추가하려면 작은 차이가 있습니다 .

여기에서 글꼴 디스플레이 옵션이있는 글꼴 패밀리를 추가하는 예입니다.

 export default {
  webfontloader : {
    google : {
      // Loads Open Sans font with weights 300 and 400 + display font as swap
      families : [ 'Open+Sans:300,400,600&display=swap' ]
    }
  } ,
}

여기에서 글꼴 디스플레이 옵션이있는 더 많은 글꼴 패밀리를 추가하기위한 예입니다.

 export default {
  webfontloader : {
      // add Google Fonts as "custom" | workaround required
      custom : {
          families : [
              'Open Sans:n3,n4' ,
              'Roboto:n3,n7'
          ] ,
          urls : [
              // for each Google Fonts add url + options you want
              // here add font-display option
              'https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap' ,
              'https://fonts.googleapis.com/css?family=Roboto:300,700&display=swap'
          ]
      }
  } ,
}