Скачать fontfaceobserver - fontfaceobserver исходный код скачать

fontfaceobserver

Другой исходный код

1.0.0

Скачать

Наблюдатель на лице шрифта

Наблюдатель Font Face Searner-это небольшой погрузчик @font-face и монитор (минимизированный 3,5 КБ и 1,3 КБ GZIPPED), совместимый с любой службой WebFont. Он будет следить за тем, как загружается WebFont, и уведомит вас. Это никоим образом не ограничивает вас, где, когда или как вы загружаете свои веб -специалисты. В отличие от веб -шрифта для Font Lauger, наблюдатель использует события прокрутки для эффективного обнаружения нагрузок шрифтов и с минимальными накладными расходами.

Как использовать

Включите свои правила @font-face как обычно. Шрифты могут быть предоставлены либо службой шрифтов, такой как шрифты Google, 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 (требуется) и объект, описывающий вариацию (необязательно). Объект может содержать 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 ) ;
  } ) ;

Следующий пример подражает FOUT с наблюдателем Font Face для My Family .

 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 в качестве зависимости:

$ 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 Searner использует обещания в своем API, поэтому для браузеров, которые не поддерживают обещания, вам необходимо включить полифилл. Если вы используете свое собственное полифиль обещания, вам просто нужно включить в свой проект fontfaceobserver.standalone.js . Если у вас нет существующего полифилла для перспектива, вы должны использовать fontfaceobserver.js , который включает в себя небольшой полифил. Использование Promise Polyfill добавляет примерно 1,4 КБ (500 байт GZIPPED) к размеру файла.