fonts fontface

글꼴-폰트 페이스

노드 패키지 관리자를 사용하여 특정 CSS 오픈 소스 글꼴을 프로젝트에로드 및 가져옵니다 ...

이제 글꼴을 가져 오는 것이 더 쉬워졌습니다 ... 글꼴에 필요한 글꼴 변수 만 가져오고로드하십시오.

이 패키지는 무엇을합니까?

• 필요한 글꼴 만로드하고 가져옵니다.
• 앱 속도, 성능 및 오프라인 사용을 향상시킵니다.

예를 들어, CSS 테마는 300,400,500,700 변형으로 Roboto Font와 함께 작동합니다. 내가해야 할 일은 특정 글꼴을 가져 오는 것입니다.

이 패키지는 당신을 위해 그것을합니다.

역사

이 서비스는 Kyle Mathews의 서체 프로젝트 에서 영감을 얻어 모든 글꼴 변형이 모두 함께로드되어 다운로드 된 글꼴로 인해 성능이 줄어 듭니다.

용법

Google 글꼴로 아래를 수행 할 수있는 방법은 다음과 같습니다.

 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500italic,700&display=swap" />

이제 NPM과 동일하게 수행 할 수 있습니다.

 npm install --save font-face-roboto

각 글꼴-폰트 페이스는 필요한 모든 글꼴 파일과 함께 번들로 제공됩니다.

프로젝트에서 사용하려면 엔트리 포인트에서 추가 및 가져옵니다.

 import "typeface-roboto/300-400-500i-700.css";

위의 작업을 수행하면 300normal, 400normal, 500italic 및 700normal의 변형으로 Roboto 글꼴을 가져옵니다.

서체 페이스는 CSS 및 글꼴 파일을로드하기 위해 로더 설정이있는 WebPack을 사용한다고 가정합니다 (다른 설정과 함께 서체를 사용할 수는 있지만 WebPack은 정말 간단하게 만듭니다). 웹 팩 구성이 올바르게 설정되었다고 가정하면 프로젝트의 항목 파일에 서체를 요구하면됩니다.

메모

필요한 파일을 프로젝트에 묶고 주입하려면 Webpack과 함께 사용하십시오.

Create-React-App 및 Gatsby와 같은 도구는 이와 함께 제공됩니다.

React 프로젝트에서 자유롭게 사용하십시오.

기여

이 프로젝트에 대한 지원과 기여는 높이 평가됩니다 !!!