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

fontfaceobserver

기타 소스코드

1.0.0

다운로드

글꼴 얼굴 관찰자

Font Face Observer는 Small @font-face 로더 및 모니터 (3.5KB 미니딩 및 1.3KB Gzipped)이며 WebFont 서비스와 호환됩니다. WebFont가로드 될 때 모니터링하고 알려줍니다. 웹 폰트를 어디에, 언제, 어떻게로드하는지 어떤 식 으로든 당신을 제한하지 않습니다. Web Font Loader Font Face Observer와 달리 스크롤 이벤트를 사용하여 글꼴로드를 효율적으로 최소화하고 오버 헤드로 감지합니다.

사용 방법

평소와 같이 @font-face 규칙을 포함하십시오. 글꼴은 Google Fonts, Typekit 및 WebType와 같은 글꼴 서비스 또는 자체 호스트로 제공 할 수 있습니다. 한 번에 단일 글꼴 제품군 모니터링을 설정할 수 있습니다.

 var font = new FontFaceObserver ( 'My Family' , {
  weight : 400
} ) ;

font . load ( ) . then ( function ( ) {
  console . log ( 'Font is available' ) ;
} , function ( ) {
  console . log ( 'Font is not available' ) ;
} ) ;

FontFaceObserver 생성자는 Font-Family 이름 (필수)과 변형을 설명하는 객체 (선택 사항)라는 두 가지 인수를 취합니다. 물체는 weight , style 및 stretch 특성을 포함 할 수 있습니다. 속성이없는 경우 기본값이 normal 으로 표시됩니다. 글꼴로드를 시작하려면 load 방법을 호출하십시오. 글꼴이로드되지 않을 때 글꼴이로드되고 거부 될 때 해결되는 새로운 약속을 즉시 반환합니다.

글꼴에 최소한 라틴어 "Besbwy"문자가 포함되어 있지 않으면 사용자 정의 테스트 문자열을 load 방법으로 전달해야합니다.

 var font = new FontFaceObserver ( 'My Family' ) ;

font . load ( '中国' ) . then ( function ( ) {
  console . log ( 'Font is available' ) ;
} , function ( ) {
  console . log ( 'Font is not available' ) ;
} ) ;

글꼴 로딩을 포기하기위한 기본 시간 초과는 3 초입니다. load 방법에 두 번째 매개 변수로 여러 밀리 초를 전달하여이를 증가 시키거나 줄일 수 있습니다.

 var font = new FontFaceObserver ( 'My Family' ) ;

font . load ( null , 5000 ) . then ( function ( ) {
  console . log ( 'Font is available' ) ;
} , function ( ) {
  console . log ( 'Font is not available after waiting 5 seconds' ) ;
} ) ;

각각의 FontFaceObserver 인스턴스를 만들어 여러 글꼴을로드 할 수 있습니다.

 var fontA = new FontFaceObserver ( 'Family A' ) ;
var fontB = new FontFaceObserver ( 'Family B' ) ;

fontA . load ( ) . then ( function ( ) {
  console . log ( 'Family A is available' ) ;
} ) ;

fontB . load ( ) . then ( function ( ) {
  console . log ( 'Family B is available' ) ;
} ) ;

각각을 개별적으로로드하지 않고 동시에로드 할 수도 있습니다.

 var fontA = new FontFaceObserver ( 'Family A' ) ;
var fontB = new FontFaceObserver ( 'Family B' ) ;

Promise . all ( [ fontA . load ( ) , fontB . load ( ) ] ) . then ( function ( ) {
  console . log ( 'Family A & B have loaded' ) ;
} ) ;

많은 수의 글꼴로 작업하는 경우 FontFaceObserver 인스턴스를 동적으로 생성하기로 결정할 수 있습니다.

 // An example collection of font data with additional metadata,
// in this case “color.”
var exampleFontData = {
  'Family A' : { weight : 400 , color : 'red' } ,
  'Family B' : { weight : 400 , color : 'orange' } ,
  'Family C' : { weight : 900 , color : 'yellow' } ,
  // Etc.
} ;

var observers = [ ] ;

// Make one observer for each font,
// by iterating over the data we already have
Object . keys ( exampleFontData ) . forEach ( function ( family ) {
  var data = exampleFontData [ family ] ;
  var obs = new FontFaceObserver ( family , data ) ;
  observers . push ( obs . load ( ) ) ;
} ) ;

Promise . all ( observers )
  . then ( function ( fonts ) {
    fonts . forEach ( function ( font ) {
      console . log ( font . family + ' ' + font . weight + ' ' + 'loaded' ) ;

      // Map the result of the Promise back to our existing data,
      // to get the other properties we need.
      console . log ( exampleFontData [ font . family ] . color ) ;
    } ) ;
  } )
  . catch ( function ( err ) {
    console . warn ( 'Some critical font are not available:' , err ) ;
  } ) ;

다음 예제는 My Family 위한 글꼴 얼굴 관찰자와 함께 Fout을 모방합니다.

 var font = new FontFaceObserver ( 'My Family' ) ;

font . load ( ) . then ( function ( ) {
  document . documentElement . className += " fonts-loaded" ;
} ) ;

. fonts-loaded {
  body {
    font-family : My Family , sans-serif;
  }
}

설치

NPM을 사용하는 경우 Font Face Observer를 종속성으로 설치할 수 있습니다.

$ npm install fontfaceobserver

그런 다음 fontfaceobserver CommonJS (Browserify) 모듈로 요구할 수 있습니다.

 var FontFaceObserver = require ( 'fontfaceobserver' ) ;

var font = new FontFaceObserver ( 'My Family' ) ;

font . load ( ) . then ( function ( ) {
  console . log ( 'My Family has loaded' ) ;
} ) ;

NPM을 사용하지 않는 경우 fontfaceobserver.js 또는 fontfaceobserver.standalone.js (아래 참조)를 잡고 프로젝트에 포함 시키십시오. 새로운 인스턴스를 만드는 데 사용할 수있는 글로벌 FontFaceObserver 내보낼 수 있습니다.

Font Face Observer는 API에서 약속을 사용하므로 약속을 지원하지 않는 브라우저의 경우 폴리 필드를 포함해야합니다. 자신의 약속 PolyFill을 사용하는 경우 프로젝트에 fontfaceobserver.standalone.js 포함하면됩니다. 기존 Promise Polyfill이없는 경우 fontfaceobserver.js 사용하여 작은 Promise Polyfill을 사용해야합니다. Promise PolyFill을 사용하면 파일 크기에 약 1.4KB (500 바이트 GZIPES)가 추가됩니다.