홈페이지>웹사이트 구축 리소스>글꼴 다운로드
다운로드

? Webfont Dowload vite 플러그인 ⚡

Vite 프로젝트에서 WebFont 링크, 가져 오기 및 정의를 수집하고 CSS 및 글꼴 파일을 다운로드하고 (개인 정보 보호 우선) 번들 에 글꼴을 추가하고 비 렌즈 차단 방법을 사용하여 글꼴을 사용하여 외부 CSS 및 글꼴 파일을 지속적으로 사용하여 개발할 수 있도록 글꼴 정의를 주입 합니다.


? 설치하다 

npm i vite-plugin-webfont-dl -D

목차

  1. ? 설치하다
  2. 용법:
    • ? 제로 구성 [메소드 A]
    • ? 간단한 구성 [메소드 B]
  3. 그게 다야!
    • ? 라 라벨
    • ? 스크린 샷
  4. ? 지원되는 WebFont 제공 업체
  5. 옵션
  6. ❓ 타사 웹 폰트
  7. ? 작동 방식
    • ? Google 글꼴
    • ? WebFont-DL Vite 플러그인
  8. 기준
  9. 자원
  10. ? 특허

? 사용법 : 제로 구성 [메소드 A]

원래 Google Fonts 코드 스 니펫 의 추출, 다운로드 및 주입 글꼴.

  1. WebFont 제공 업체 (예 : Google Fonts) 에서 글꼴 패밀리를 선택하고 "Web On the Web On the Web" 블록에서 코드를 <head> 로 복사하십시오. 
     < link rel =" preconnect " href =" https://fonts.googleapis.com " >
< link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin >
< link href =" https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400&family=Roboto:wght@100&display=swap " rel =" stylesheet " >
  2. 구성없이 Vite 플러그인에 webfontDownload 추가하면 플러그인이 자동으로 모든 것을 처리합니다. 
     // vite.config.js

import webfontDownload from 'vite-plugin-webfont-dl' ;

export default {
  plugins : [
    webfontDownload ( ) ,
  ] ,
} ;
  3. 원래 웹 폰트 태그는 dist/index.html 로 대체됩니다. 
     < style > @font-face{font-family:...;src:url(/assets/foo-xxxxxxxx.woff2) format('woff2'),url(/assets/bar-yyyyyyyy.woff) format('woff')}... </ style >

? 사용법 : 간단한 구성 [메소드 B]

구성된 WebFont CSS URL 의 발췌, 다운로드 및 주입.

  1. WebFont 제공 업체 (예 : Google Fonts) 에서 글꼴 패밀리를 선택하고 "웹 사용" 코드 블록에서 CSS URL을 복사하십시오. 
     < link href =" [CSS URL] " rel =" stylesheet " >
  2. 선택한 Google Fonts CSS URL을 사용하여 Vite 플러그인에 webfontDownload 추가 : 
     // vite.config.js

import webfontDownload from 'vite-plugin-webfont-dl' ;

export default {
  plugins : [
    webfontDownload ( [
      'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap' ,
      'https://fonts.googleapis.com/css2?family=Fira+Code&display=swap'
    ] ) ,
  ] ,
} ;

그게 다야!

웹 폰트가 주입되어 사용할 준비가되었습니다 .
플러그인은 로컬 개발 서버에서 작업하든 제작에 대한 건물에 관계없이 작업을 완벽하게 수행합니다. 

 h1 {
  font-family : 'Press Start 2P' , cursive;
}

h2 {
  font-family : 'Fira Code' , monospace;
}

? 라 라벨

Laravel Vite 플러그인으로 작동하도록하려면이 라인을 블레이드 파일에 추가하십시오. 

 @vite ( ' webfonts.css ' )

? 스크린 샷


? 지원되는 WebFont 제공 업체

  • Google Fonts : 0 구성 또는 간단한 구성으로 작동합니다.
  • 버니 글꼴 : 제로 구성 또는 간단한 구성으로 작동합니다.
  • Fontshare : 구성 또는 간단한 구성으로 작동합니다
  • Fira Code , Hack Fonts ( cdn.jsdelivr.net ) : 0 구성 또는 간단한 구성으로 작동합니다.
  • Inter Font ( rsms.me ) : 0 구성 또는 간단한 구성으로 작동합니다.
  • CSS가있는 모든 공급자 ( @font-face 정의 포함)는 간단한 구성과 함께 작동합니다.

옵션

  • injectAsStyleTag ( boolean , 기본값 : true ) :
    웹 폰트를 <style> 태그 (임베디드 CSS) 또는 외부 .css 파일로 주입

  • minifyCss ( boolean , 기본값 : build.minify 의 값 ) :
    빌드 중에 CSS 코드를 조정하십시오.

  • embedFonts ( boolean , 기본값 : false ) :
    베이스 64- 인코딩 된 글꼴을 CSS에 포함시킨다.
    CSS가 동일한 글꼴 파일에 대한 여러 참조를 포함하는 경우 경우에 따라 경우에 따라 파일 크기가 증가 할 수 있습니다. 예

  • async ( boolean , 기본값 : true ) :
    컨텐츠 보안 정책 문제를 일으킬 수있는 인라인 이벤트 처리기 ( webfonts.css )의 사용을 방지하십시오.
    injectAsStyleTag:false 에서만 작동합니다.

  • cache ( boolean , 기본값 : true ) :
    로컬 파일 캐시에 다운로드 된 CSS 및 글꼴 파일을 지속적으로 저장합니다.
    false 으로 설정하면 기존 캐시가 삭제됩니다.

  • proxy ( false|AxiosProxyConfig , 기본값 : false ) :
    네트워크 요청에 대한 프록시 구성.

  • assetsSubfolder ( string , 기본값 : '' ) :
    다운로드 된 글꼴 파일을 자산 디렉토리에서 하위 폴더를 분리하기 위해 이동합니다.

용법: 

 ViteWebfontDownload (
  [ ] ,
  {
    injectAsStyleTag : true ,
    minifyCss : true ,
    embedFonts : false ,
    async : true ,
    cache : true ,
    proxy : false ,
    assetsSubfolder : '' ,
  }
)

또는: 

 ViteWebfontDownload (
  [
    'https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap' ,
  ] ,
  {
    injectAsStyleTag : true ,
    minifyCss : true ,
    embedFonts : false ,
    async : true ,
    cache : true ,
    proxy : false ,
    assetsSubfolder : '' ,
  }
)

❓ 타사 웹 폰트

켈 표준 방법을 사용하여 웹 페이지에 타사 웹 폰트 (Google Fonts, Bunny Fonts 또는 Fontshare)를 추가하면 페이지로드가 크게 느려질 수 있습니다. Lighthouse 및 Pagespeed Insights 는 "Render-Blocking Resource" 라고 부릅니다. 즉, WebFonts CSS가 원격 서버에서 가져 오지 않을 때까지 페이지를 완전히 렌더링 할 수 없습니다.

? 타사 웹 폰트로 인한 렌더 블로킹 리소스를 피함으로써 페이지 성능을 향상 시켜 사용자 경험을 향상시키고 SEO 결과를 향상시킬 수 있습니다 .

플러그인은 Google Fonts와 같은 타사 웹 폰트 서비스에서 주어진 글꼴을 다운로드하고 (내부 또는 외부 스타일 시트로서) 동적으로 Vite 프로젝트에 주입하여 타사 웹 폰트를 자체 주최 된 웹로 변환합니다. ?

? 상당한 성능 증가 외에도 방문자는 제 3 자 서버가 없기 때문에 개인 정보 보호 에 도움이됩니다.


? 작동 방식

? Google 글꼴

Google Fonts는 웹 사이트의 <head> 에 주입 해야하는 다음 코드를 생성합니다. 

 < link rel =" preconnect " href =" https://fonts.googleapis.com " >
< link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin >
< link href =" https://fonts.googleapis.com/css2?family=Fira+Code&display=swap " rel =" stylesheet " >

Google Fonts를 사용하여 클라이언트 측 에서 발생하는 일 :

  1. 첫 번째 줄은 브라우저에 힌트를 제공하여 fonts.googleapis.com 으로 연결 핸드 셰이크 (DNS, TCP, TLS) 를 시작합니다. 이것은 성능을 향상시키기 위해 백그라운드에서 발생합니다. [ preconnect ]
  2. 두 번째 줄은 fonts.gstatic.com 에 대한 또 다른 preconnect 힌트입니다. [ preconnect ]
  3. Third Line은 브라우저에 fonts.googleapis.com 에서 CSS 스타일 파일을로드하고 사용하도록 지시합니다 ( font-display:swap ) . [ stylesheet ]
  4. 브라우저는 CSS 파일을 다운로드하여 구문 분석하기 시작합니다. 구문 분석 된 CSS는 fonts.gstatic.com 서버의 글꼴 URL을 포함하는 @font-face 정의 세트입니다.
  5. 브라우저는 fonts.gstatic.com 에서 모든 관련 글꼴을 다운로드하기 시작합니다.
  6. 성공적인 글꼴을 다운로드 한 후 브라우저는 다운로드 된 글꼴로 폴백 글꼴을 교환합니다.

?

? WebFont-DL Vite 플러그인

반대로, WebFont-DL 플러그인은 빌드 타임에 대부분의 작업을 수행하고 최소값을 브라우저로 남겨 둡니다.

WebFont-DL 플러그인

  • WebFont CSS URL을 수집합니다 (플러그인 구성, index.html 및 생성 된 CSS에서)
  • WebFont CSS 파일 다운로드
  • 글꼴 URL을 추출합니다
  • 글꼴을 다운로드합니다
  • 묶음을 번들에 추가합니다
  • 임베디드 CSS ( <style> 태그) 또는 WebFont / 외부 CSS 파일을 생성합니다.
  • 비 렌즈 차단 방법을 사용하여 다음 코드를 웹 사이트의 <head> 에 주입하십시오 . 
 < style >
  @font-face {
    font-family: 'Fira Code';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(/assets/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_GNsJV37Nv7g.9c348768.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  ...
</ style >

또는 (DEV 서버 또는 injectAsStyleTag: false 옵션) 

 < link rel =" preload " as =" style " href =" /assets/webfonts.b904bd45.css " >
< link rel =" stylesheet " media =" print " onload =" this.onload=null;this.removeAttribute('media'); " href =" /assets/webfonts.b904bd45.css " >

WebFont-DL 플러그인을 사용하여 클라이언트 측 에서 발생하는 일 :

  1. 임베디드 CSS ( <style> 태그)에서 글꼴을로드합니다.

또는

  1. First Line은 브라우저에 나중에 스타일 시트로 사용하도록 CSS 파일을 프리 페치하도록 지시합니다. [ preload ]
  2. 두 번째 줄은 브라우저에 해당 CSS 파일을 " print "스타일 시트 (비 렌즈 차단) 로로드하고 사용하도록 지시합니다. 로드 후 " all "미디어 유형 스타일 시트 ( " media "속성을 제거함으로써)로 홍보합니다. [ stylesheet ]

기준

스타터 vite 프로젝트

▶ ️ 표준 Google 글꼴 ? ▶ ️ WebFont DL Vite 플러그인
? webfont.feat.agency ? webfont-dl.feat.agency

비교하다


자원

  • 페이지 속도 체크리스트 / 수정 및 렌더 차단 리소스 제거

? 특허

MIT 라이센스 © 2022 Feat.

확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체