fontfaceonload 다운로드 - fontfaceonload 소스 코드 다운로드

fontfaceonload

글꼴 다운로드

Version 0.1.7

다운로드

fontfaceonload

켈 켈 켈 이 프로젝트는 보관되었습니다. CSS 글꼴로드 API를 대신 직접 사용하십시오! 예제는 web-font-loading-recipes 확인하십시오.

데모

용법

기존 @font-face 선언과 함께 사용하십시오.

 @font-face {
    font-family : My Custom Font Family;
    /* src and other properties as normal */
}

도서관을 포함하십시오. JavaScript에 전화하십시오.

 FontFaceOnload ( "My Custom Font Family" , {
    success : function ( ) { } ,
    error : function ( ) { } ,
    timeout : 5000 // in ms. Optional, default is 10 seconds
} ) ;

콘텐츠 글꼴과 함께 사용합니다

@font-face 가로드되는 동안 폴백 글꼴을 볼 수 있도록하기 위해 FontFaceOnload 사용하기 만하면됩니다.

 FontFaceOnload ( "My Custom Font Family" , {
    success : function ( ) {
        document . documentElement . className += " my-custom-font-family" ;
    }
} ) ;

그런 다음 클래스를 사용하여 사용자 정의 글꼴 사용을 범위로 유지하십시오.

 body {
    font-family : sans-serif;
}
. my-custom-font-family body {
    font-family : My Custom Font Family , sans-serif;
}

또한 FOIT @font-face 제거하고 CSS를 변경할 필요가없는 대체 접근 방식은 loadCSS 라이브러리를 사용하여 데이터 URI 소스 블록을 동적으로로드하는 것입니다. loadCSS fontfaceonload 보다 작습니다. 이 접근법의 한계에는로드 할 형식 (Woff, Woff2, TTF)을 관리하도록 요구하는 것이 포함되며 아이콘 글꼴과 함께 작동하지 않습니다 (설명 텍스트와 같은 다른 형제 요소를 스타일링하기 위해 CSS 클래스가 필요하기 때문에).

아이콘 글꼴과 함께 사용하십시오

아이콘 글꼴이로드되는 동안 이상한 폴백 문자가 보이지 않도록 폴백 글꼴을 숨기려면 다음과 같은 glyphs 옵션과 함께 fontfaceonload를 사용하십시오.

 FontFaceOnload ( "My Custom Font Icon" , {
    success : function ( ) {
        document . documentElement . className += " my-custom-font-icon" ;
    } ,
    glyphs : "uE600uE601uE602uE605" // Optional, default is "". Useful for icon fonts: a few code points from your custom font icon.
} ) ;

그런 다음 클래스를 사용하여 사용자 정의 글꼴 사용을 범위로 유지하십시오.

. icon {
    display : none;
}
. my-custom-font-family . icon {
    display : inline-block;
    font-family : My Custom Font Icon , sans-serif;
}

작동 방식

이것은 사용 가능한 경우 CSS 글꼴 로딩 모듈을 사용합니다 (현재 Chrome 35+ 및 Opera 22+). 이를 사용할 수 없으면 Typekit Web Font Loader (현재 7.1kb GZIP)에 사용 된 것과 매우 유사한 접근 방식을 사용합니다.

기본적으로 웹 글꼴과 기본 Serif/Sans-Serif 서체를 포함한 글꼴 스택이있는 요소를 만듭니다. 그런 다음 테스트 문자열을 사용하고 특정 간격으로 요소의 치수를 측정합니다. 치수가 기본 폴백 글꼴과 다르면 글꼴이 성공적으로로드 된 것으로 간주됩니다.

CSS 글꼴 로딩 모듈에 대한 전체 폴리 필드를 원한다면 Bram Stein의 글꼴 로더를 따라 가십시오. 그가이 폴리 필을 출시 한 이후 사양이 바뀌 었다고 생각하지만, 그는 업데이트 된 버전으로 작업하고 있습니다.

프로젝트 구축

이 명령을 실행하십시오.

npm install
bower install
grunt init
정상적으로 grunt .

Grunt 구성

이 프로젝트는 하나의 거대한 Gruntfile.js 대신 모듈 식 그 런트 설정을 사용하고 있습니다. 각 개별 Grunt Configuration 옵션 키에는 grunt/config-lib/ (Readonly 업스트림 구성, 직접 수정하지 않음) 또는 grunt/config/ (프로젝트 별 구성)에 자체 파일이 있습니다. 두 디렉토리 모두에서 동일한 키를 사용할 수 있으며, 객체는 Lo-Dash 병합을 사용하여 현명하게 결합됩니다.

이전 GruntFile 설정에서 연결하려면 grunt.initConfig grunt.initConfig({ concat: { /* YOUR CONFIG */ } }); . 새 구성에서는 module.exports = { /* YOUR CONFIG */ }; 로 grunt/config/concat.js 생성합니다. .