ดาวน์โหลด fontfaceobserver - fontfaceobserver Source Source Download

fontfaceobserver

ซอร์สโค้ดอื่น ๆ

1.0.0

ดาวน์โหลด

Font Face Observer

Font Face Observer เป็นตัวโหลด @font-face ขนาดเล็กและจอภาพ (3.5kb minified และ 1.3kb gzipped) เข้ากันได้กับบริการ webfont ใด ๆ มันจะตรวจสอบเมื่อเว็บฟอนต์ถูกโหลดและแจ้งให้คุณทราบ มันไม่ได้ จำกัด คุณในทุก ๆ ที่เมื่อไหร่หรือวิธีการโหลดเว็บฟอนต์ของคุณ ซึ่งแตกต่างจากตัวอักษร Font Font Font 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 ) ;
  } ) ;

ตัวอย่างต่อไปนี้เลียนแบบ Fout กับ Font Face Observer สำหรับ 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 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 หากคุณใช้ Polyfill สัญญาของคุณเองคุณเพียงแค่ต้องรวม fontfaceobserver.standalone.js ในโครงการของคุณ หากคุณไม่มี Polyfill สัญญาที่มีอยู่คุณควรใช้ fontfaceobserver.js ซึ่งรวมถึง Polyfill สัญญาขนาดเล็ก การใช้ Polyfill สัญญาเพิ่มประมาณ 1.4kB (500 ไบต์ gzipped) ลงในขนาดไฟล์