woff2base64 다운로드 woff2base64 소스 코드 다운로드

woff2base64

글꼴 다운로드

1.0.0

다운로드

Woff2Base64

Woff2 및 Woff 폰트가 Base64로 포함 된 CSS 글꼴 진정을 생성합니다.

설치

 npm install --save woff2base64

용법

WOFF2BASE64는 주어진 글꼴 파일 이름 (CASE Insensentitive)에서 글꼴 중량 및 글꼴 스타일을 자동으로 조회합니다. 가능한 모든 CSS 값이 지원됩니다.

글꼴의 파일 이름에 정기라는 단어가 포함되어 있으면 글꼴 체중이 normal 으로 설정됩니다.

그러나 글꼴의 파일 이름을 변경할 수없는 경우 font 매개 변수를 통해 각 글꼴의 무게와 스타일을 전달할 수 있습니다 (아래 참조).

 import fs from 'fs' ;
import woff2base64 from 'woff2base64' ;
const fonts = {
    'Roboto-Bold.woff2' : fs . readFileSync ( 'fonts/Roboto/Roboto-Bold.woff2' ) ,
    'Roboto-Bold.woff' :  fs . readFileSync ( 'fonts/Roboto/Roboto-Bold.woff' ) ,
	// ...
} ;
const options = {
    fontFamily : 'Roboto'
} ;
const css = woff2base64 ( fonts , options ) ;
// css.woff2 = '@font-face{font-family:"Roboto";src:url(data:application/font-woff2;charset=utf-8;base64,...'
// css.woff  = '@font-face{font-family:"Roboto";src:url(data:application/font-woff;charset=utf-8;base64,...'

fs . writeFileSync ( 'build/roboto.woff2.css' , css . woff2 ) ;
fs . writeFileSync ( 'build/roboto.woff.css' , css . woff ) ;

매개 변수

Woff2Base64는 fonts 과 options 의 두 객체를 수락합니다.

글꼴 (필수)

Woff2 및 Woff 파일 이름을 키로 사용하십시오.

값은 파일 컨텐츠를 포함하는 String , 파일 내용을 포함하는 Buffer 또는 Object 포함하여 글꼴 특정 옵션을 전달할 수 있습니다.

 const fonts = {
    'Roboto-BoldItalic.woff2' : {
        content : fs . readFileSync ( 'fonts/Roboto/Roboto-BoldItalic.woff2' ) ,
        weight : 'bold' ,
        style : 'italic'
    } ,
    'Roboto-Bold.woff2' : {
        content : fs . readFileSync ( 'fonts/Roboto/Roboto-Bold.woff2' ) ,
        weight : 'bold' ,
        style : 'normal'
    } ,
    'Roboto-Regular.woff2' : fs . readFileSync ( 'fonts/Roboto/Roboto-Bold.woff2' ) ,
} ;

옵션

Fontfamily (필수)

CSS에 사용 된 글꼴 가족의 이름.

유형 : String

fontfacetemplate

템플릿은 CSS를 생성하는 데 사용됩니다. Lodash의 _.template와 함께 사용됩니다.

유형 : String

기본:

 @font-face{ font-family:"<%=family%>";src:url(<%=uri%>) format("<%=format%>");font-weight:<%=weight%>;font-style:<%=style%>;}

fonturitemplate

템플릿은 Base64 인코딩 된 데이터 URI를 생성하는 데 사용됩니다. Lodash의 _.template와 함께 사용됩니다.

유형 : String

기본:

 data:<%=mime%>;charset=utf-8;base64,<%=base64%>

기치

생성 된 CSS 파일에 미래화되는 배너. 배너를 비활성화하려면 '' 로 설정하십시오.

유형 : String

자원

Font Squirrel의 WebFont 생성기로 TTF 글꼴을 Woff2로 변환하고 Woff를 변환하십시오.
Canisue.com에서 Woff2 및 Woff Fonts에 대한 현재 브라우저 지원을 참조하십시오.
왜 이것을 필요로합니까? LocalStorage를 사용하고 Adam Beres-Deak의 Woff2 지원을 제공하여 더 나은 WebFont로드를 읽으십시오.
이 패키지는 Artem Sapegin의 Fontoptim을 기반으로합니다.