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

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 */
}

รวมห้องสมุด เรียกจาวาสคริปต์

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

ใช้กับฟอนต์เนื้อหา

เพื่อให้สามารถมองเห็นฟอนต์ทางเลือกได้ในขณะที่ @font-face กำลังโหลดเพียงแค่ใช้ FontFaceOnload เช่น So:

 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 และไม่ต้องการให้คุณเปลี่ยน CSS ของคุณคือการใช้ไลบรารี loadCSS เพื่อโหลด @font-face ด้วยบล็อกแหล่งข้อมูล URI แบบไดนามิก loadCSS มีขนาดเล็กกว่า fontfaceonload ข้อ จำกัด ของวิธีการนี้รวมถึงการกำหนดให้คุณจัดการรูปแบบที่จะโหลด (WOFF, WOFF2, TTF) และมันจะไม่ทำงานเช่นเดียวกับแบบอักษรไอคอน (เนื่องจากคุณต้องการคลาส CSS เพื่อจัดสไตล์องค์ประกอบพี่น้องอื่น ๆ เช่นข้อความอธิบาย)

ใช้กับแบบอักษรไอคอน

หากต้องการซ่อนตัวอักษรทางเลือกเพื่อให้ตัวละครทางเลือกแปลก ๆ ไม่สามารถมองเห็นได้ในขณะที่ตัวอักษรไอคอนกำลังโหลดให้ใช้ FontfaceonLoad กับตัวเลือก glyphs เช่น So:

 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 (ซึ่งปัจจุบันคือ 7.1KB GZIP)

โดยพื้นฐานแล้วมันจะสร้างองค์ประกอบที่มีสแต็กตัวอักษรรวมถึงตัวอักษรเว็บและตัวอักษร serif/sans-serif เริ่มต้น จากนั้นใช้สตริงทดสอบและวัดขนาดขององค์ประกอบในช่วงเวลาหนึ่ง เมื่อขนาดแตกต่างจากฟอนต์ทางเลือกเริ่มต้นฟอนต์จะถือว่ามีการโหลดสำเร็จ

หากคุณต้องการโพลีฟิลด์เต็มรูปแบบสำหรับโมดูลการโหลดแบบอักษร CSS ให้ทำตามพร้อมกับตัวอักษรฟอนต์ของ Bram Stein ฉันเชื่อว่าข้อมูลจำเพาะมีการเปลี่ยนแปลงตั้งแต่เขาเปิดตัวโพลีฟิลนี้ แต่เขากำลังทำงานกับเวอร์ชันที่อัปเดตแล้ว

การสร้างโครงการ

เรียกใช้คำสั่งเหล่านี้:

npm install
bower install
grunt init
grunt ตามปกติ

การกำหนดค่าคำราม

แทนที่จะเป็นหนึ่ง Gruntfile.js ยักษ์โครงการนี้ใช้การตั้งค่าคำรามแบบแยกส่วน แต่ละคีย์ตัวเลือกการกำหนดค่าคำรามแต่ละตัวมีไฟล์ของตัวเองที่อยู่ใน grunt/config-lib/ (upstream configs แบบอ่านอย่างเดียวอย่าแก้ไขสิ่งเหล่านี้โดยตรง) หรือ grunt/config/ (การกำหนดค่าเฉพาะโครงการ) คุณอาจใช้คีย์เดียวกันในไดเรกทอรีทั้งสองวัตถุนั้นรวมกันอย่างชาญฉลาดโดยใช้ Lo-Dash Merge

สำหรับการต่อเนื่องในการตั้งค่า gruntfile ก่อนหน้านี้คุณจะเพิ่มคีย์อื่นให้กับวัตถุยักษ์ที่ส่งผ่านไปยัง grunt.initConfig เช่นนี้: grunt.initConfig({ concat: { /* YOUR CONFIG */ } }); - ในการกำหนดค่าใหม่คุณจะสร้าง grunt/config/concat.js ด้วย module.exports = { /* YOUR CONFIG */ }; -