easyfonts

쉬운 글꼴

Easy Fonts는 HTML에서 <div classs="font-open-sans"></div> 로 사용할 CSS 클래스를 제공합니다. 따라서 프로젝트에서 Google 글꼴을보다 쉽게 사용할 수 있습니다. Easy Fonts는 새로운 글꼴 제품군을 시도 할 때마다 더 이상 폴링 단계를 반복 할 필요가 없으므로 웹 폰트 2 단계를 더 쉽게합니다.

1. 매번 새로운 글꼴 스타일 시트를 생성 할 필요가 없으며
2. 글꼴을 적용하기 위해 CSS를 편집 할 필요가 없습니다.

쉬운 글꼴을 사용하면 단일 경량 CSS 파일을 사용하여 프로젝트의 모든 글꼴을 가져 오며 새로운 글꼴을 가져 오는 것에 대해 걱정할 수 없습니다.

왜 쉬운 글꼴

Easy Fonts는 PageCDN이 사용하는 호스트 통합 기술을 활용하여 웹 사이트 속도를 높이기 위해 개발되었습니다. 우리의 초기 목표는 컨텐츠 전달에 PageCDN을 사용하는 웹 사이트가 동일한 CDN 호스트를 통해 글꼴을 전달하여 Google 글꼴에 필요한 2 개의 추가 DNS 조회를 줄이는 것이 었습니다. 나중에 쉬운 글꼴은 빠른 프로토 타이핑에 매우 유용한 라이브러리로 판명되었습니다. 그래서 우리는이 라이브러리를 스스로 호스팅하거나 Fonts.google.com과 함께 사용하는 데 관심이있는 사람을 위해 Github로 옮겼습니다.

쉬운 글꼴 사용

Easy Fonts는 새로운 글꼴 제품군을 테스트 할 때마다 CSS 수정에 대해 걱정하지 않고 웹 사이트를 더 빨리 구축 할 수 있도록 CSS 클래스 모음을 제공합니다. 쉬운 글꼴 참조를 사용하여 사용 가능한 모든 글꼴 패밀리 및 관련 CSS 클래스에 대해 알아보십시오.

 < link href =" https://pagecdn.io/lib/easyfonts/fonts.css " rel =" stylesheet " />

<!-- Or load specific font files
<link href="https://pagecdn.io/lib/easyfonts/open-sans.css" rel="stylesheet" />
<link href="https://pagecdn.io/lib/easyfonts/roboto.css" rel="stylesheet" />
-->

< div class =" font-roboto " >
    < div class =" font-open-sans w600i " >
        Stuff here appears in Open Sans, bold and italic
    </ div >
    < div class =" w600 " >
        Stuff here appears in Roboto, bold
    </ div >
    < div >
        Stuff here appears in Roboto and uses inherited weight and style
    </ div >
</ div >

:)

fonts.css 사용하는 경우 브라우저는 HTML에서 실제로 사용하는 글꼴 파일 만 다운로드하며 모든 글꼴을로드하여 사용자의 대역폭을 낭비하지 않습니다. fonts.css 파일 자체는 PageCDN에서로드 된 경우 25KB 에 불과합니다. PageCDN은 Brotli : 11 압축을 사용하여 파일을 매우 단단히 압축하여 크기를 허용 가능한 한계 내에서 유지합니다.

글꼴 가져 오기

dist Directory에는 HTML에서 링크 할 수있는 각 개별 글꼴 제품군에 대한 CSS 파일이 포함되어 있습니다. 라이브러리를 다운로드하여 개별 글꼴 패밀리와 함께 플레이하거나 CDN에서 직접 CSS 파일에 링크 할 수 있습니다. 아래는 open sans 링크입니다. 다른 글꼴 패밀리의 경우 편리한 검색 도구가 있습니다.

 < link href =" https://pagecdn.io/lib/easyfonts/open-sans.css " rel =" stylesheet " />

모든 글꼴을 가져옵니다

다른 글꼴을 빠르게 테스트하려면 Easy Fonts를 사용하면 모든 글꼴 패밀리를 한 번에 쉽게 가져올 수 있습니다. 이를 위해서는 dist/fonts.css 파일을 사용하거나 아래 CDN 링크를 사용해야합니다.

 < link href =" https://pagecdn.io/lib/easyfonts/fonts.css " rel =" stylesheet " />

Google Fonts와 함께 사용합니다

쉬운 글꼴과 Google 글꼴을 함께 사용할 수 있습니다. 다음은 다음과 같습니다.

 < link href =" https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&display=swap " rel =" stylesheet " > 
< link href =" https://pagecdn.io/lib/easyfonts/classes.css " rel =" stylesheet " />

글꼴을 동적으로 가져옵니다

Easy Fonts는 개별 글꼴 패밀리를 위해 JSON 형식의 글꼴 정보를 제공합니다. 이를 통해 테마 및 웹 사이트 빌더를위한 글꼴 선택 인터페이스를 구축 할 수 있습니다. JSON은 dist/info 디렉토리에 있습니다. 개별 글꼴에 대한 정보를로드하거나 전체 글꼴 컬렉션에 대한 포괄적 인 JSON 파일을 사용할 수 있습니다.

모든 글꼴의 정보를로드합니다

 https://pagecdn.io/lib/easyfonts/info/fonts.json

단일 글꼴 제품군의로드 정보

 https://pagecdn.io/lib/easyfonts/info/open-sans.json

특허

dist/fonts 내부의 TTF 글꼴 파일은 라이센스 정보를 읽을 수있는 Google Fonts Github Repo에서 TTF 파일의 변비되지 않은 사본입니다. 개별 글꼴 패밀리는 dist/license 로 자체 라이센스 파일을 가지고 있습니다. 관련 라이센스 파일은 모든 CSS 파일에서 링크되어 라이센스 정보를 쉽게 볼 수 있도록 도와줍니다.

이 저장소의 CSS 및 JSON 파일은 글꼴 파일에서만 동적으로 생성되며 MIT 라이센스에 따라 다루어집니다. 이 repo에 나열된 글꼴 가족의 라이센스 문제를 알고 있다면 불일치를 해결할 수 있도록 문제를 열어주십시오.