google font splitter
1.0.0
Google Font에서 제공 한 온라인 글꼴 파일을 로컬 사이트로 다운로드하는 도구.
Google-Font에서 제공하는 온라인 글꼴은 글꼴 패키지 세분화에 unicode-range 사용하여 글꼴의 로딩 속도를 효과적으로 향상시킬 수 있습니다.
그러나 네트워크, 환경 및 기타 문제로 인해 일부 프로젝트는 Google Fonts를 정상적으로 참조 할 수 없으므로이 도구는 특정 Google Online을 로컬로 다운로드하여 프로젝트가 로컬로 직접 참조 할 수 있도록합니다.
요구 사항 : node 12+
npm install -g google-font-splitter이 도구의 사용은 온라인 글꼴 링크를 얻고 글꼴 파일을 다운로드하는 두 단계로 나뉩니다.
1 단계 : 온라인 글꼴 링크를 가져옵니다
Google 글꼴을 열고 검색하여 다운로드하려는 글꼴을 선택하십시오.
글꼴 세부 사항 페이지에서 아래로 스크롤하여 스타일을 찾은 다음 사용하려는 글꼴 오른쪽 의이 스타일을 선택 하십시오.
오른쪽의 선택된 패밀리 패널 아래 온라인 글꼴 링크를 찾아 복사하십시오 (링크 만, 전체 라인 링크 태그를 복사 할 필요가 없습니다 ).
2 단계 : 글꼴 파일을 다운로드하십시오
빈 폴더를 찾고 다음 명령을 실행하십시오.
google-font-splitter " https://你复制出的在线字体链接"
# 例如 google-font-splitter "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400&display=swap"입력 후 도구는 다음 출력을 인쇄합니다.
downloading entry css file...
recast entry file and generating font download tasks...
save entry css file...
downloading font source ======================================== 100% 291/291
download complate, save to D:projectgoogle-font-splitterfont-resultnoto-sans-sc
그런 다음 로그의 마지막 줄에서 폴더에서 다운로드 된 글꼴 폴더를 찾을 수 있습니다. 디렉토리는 다음과 같습니다.
noto-sans-sc
├── s/notosanssc/xxx/...
└── noto-sans-sc.css
분할 글꼴 파일과 디렉토리와 동일한 이름의 CSS 파일을 저장하는 폴더가 포함되어 있습니다. 이 CSS 파일은 항목 파일입니다. 폴더를 프로젝트에 복사하고 <link /> 태그를 사용하여 참조하십시오.
--help 매개 변수를 사용하여 언제든지 도움말 정보를 볼 수 있습니다.
매개 변수 url
이 도구는 하나의 매개 변수, 즉 Google 글꼴의 온라인 글꼴 링크 만 허용되므로 링크가 CSS 파일을 가리켜야합니다.
구성 항목 -r, --root <path>
Font Entry CSS 파일은 FONT 소스 파일의 경로 접두사를 소개합니다.이 파일은 기본적으로 동일한 수준의 상대 경로로 기본적으로 표시됩니다 ( 기본적으로 Entry CSS 및 FONT 소스 파일을 동일한 수준 디렉토리에 배치해야합니다 ).
이 매개 변수를 사용하여 글꼴 소스 파일의 스토리지 위치를 지정할 수 있습니다. 예를 들어, 별도의 CDN 네트워크에 글꼴을 저장하십시오.
google-font-splitter "https://fonts.googleapis.com/..." -r https://your-custom-cdn/public/fonts/
구성 항목 -d, --dist <savePath>
글꼴 파일을 다운로드 할 기본 위치는 ./font-result 입니다.
구성 항목 -n, --name <fileName>
글꼴 항목 파일의 이름, 즉 다운로드 디렉토리의 폴더 이름 및 내부의 항목 CSS 파일의 이름입니다.
기본적으로 제공된 Google Fonts 링크에서 구문 분석되며 해상도가 실패하면 현재 밀리 초 타임 스탬프가 사용됩니다.
구성 항목 -c, --concurrent <number>
분할 글꼴 소스 파일을 다운로드 할 때 동시성 횟수, 기본값은 30입니다.
사용 방법은 매우 간단합니다. <link href="xxx.css" rel="stylesheet"> 사용하여 다운로드 된 글꼴 항목 파일을 소개하면됩니다.
다음은 몇 가지 공통 프레임 워크 참조입니다 (다운로드 된 글꼴 파일이 NOTO-SANS-SC 폴더에 저장되고 Entry 파일은 noto-sans-sc/noto-sans-sc.css 라고 가정합니다).
vue2 (vue-cli)
다운로드 된 글꼴 폴더를 VUE2 프로젝트의 /public 로 복사하십시오.
/public/index.html 의 글꼴 입력 파일을 참조하십시오.
< link href =" <%= BASE_URL %>noto-sans-sc/noto-sans-sc.css " rel =" stylesheet " >그런 다음 필요한 위치에 글꼴 패밀리를 설정하십시오.
# app {
font-family : 'Noto Sans SC' , sans-serif;
}vue3 (vite)
다운로드 된 글꼴 폴더를 Vite 프로젝트의 /public 로 복사하십시오.
/index.html 의 글꼴 입력 파일을 참조하십시오.
<!-- 注意 vite 项目直接从根目录引用 public 中的文件即可 -->
< link href =" /noto-sans-sc/noto-sans-sc.css " rel =" stylesheet " >마지막으로, 필요한 곳에 글꼴 패밀리를 설정하십시오.
React (Create-React-App)
먼저 다운로드 된 글꼴 폴더를 React 프로젝트의 /public 로 복사하십시오.
그런 다음 /public/index.html 의 글꼴 입력 파일을 참조하십시오.
< link href =" %PUBLIC_URL%/noto-sans-sc/noto-sans-sc.css " rel =" stylesheet " >마지막으로, 필요한 곳에 글꼴 패밀리를 설정하십시오.
자세한 내용은 Google-Fonts 라이센스를 참조하십시오.
이 도구는 다음의 종속성 개발을 사용합니다. FS-Extra Chalk 노드 페치 CSS-Tree.
