HiGoogleFonts

Higooglefonts

Higooglefonts ช่วยให้คุณเพิ่มตัวเลือกฟอนต์ Google เพื่อแสดงรายการของ Google Fonts ได้อย่างง่ายดาย ตัวเลือกตัวอักษรนี้ใช้พร้อมกับปลั๊กอิน jQuery ที่เราเลือก ตัวเลือกแสดงตัวอย่างแบบฟอนต์ทันทีโดยไม่ต้องโหลดตัวอักษร

การสาธิต

การใช้งาน

ในการใช้ไลบรารี Higooglefonts เพียงให้รวมรหัสด้านล่างไว้ในหน้าของคุณใน 5 ขั้นตอนง่าย ๆ ตรวจสอบดัชนีสำหรับตัวอย่างง่ายๆ:

ขั้นตอนที่ 1.

โคลน repo: git clone https://github.com/saadqbal/HiGoogleFonts.git

ขั้นตอนที่ 2.

ติดตั้งการพึ่งพา: bower install

ขั้นตอนที่ 3.

รวมแผ่นสไตล์ เพิ่มบรรทัดต่อไปนี้ลงในส่วนหัวหน้าของคุณ:

 < link rel = "stylesheet" href = "css/fonts.css" > 

ขั้นตอนที่ 4.

รวมห้องสมุดที่ต้องการ เพิ่มบรรทัดต่อไปนี้ลงในส่วนหัวหน้าของคุณหลังจากแผ่นสไตล์:

 < script src = "https://code.jquery.com/jquery-1.12.0.min.js" > </ script >
 < script src = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js" > < / script >
< script src = "https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js" > </ script >
< script src = "js/fonts.js" > </ script > 

ขั้นตอนที่ 5.

ตอนนี้เพิ่มรหัสด้านล่างลงในตัวเพื่อโหลดแบบอักษรทั้งหมด:

 < select id = "select_fontfamily" > </ select >
< p style = "font-size: 20px;" > This is the preview of the font selected < / p>


< script type = "text/javascript" >
$(document).ready(function() {

	$ ( "#select_fontfamily" ) . higooglefonts ( {			
		selectedCallback : function ( e ) {
			console . log ( e ) ;
		} ,
		loadedCallback : function ( e ) {
			console . log ( e ) ;
			$ ( "p" ) . css ( "font-family" , e ) ;
		}			
	} ) ;

  } );

</ script >

NPM และ Bower

NPM

• $ npm install higooglefonts

คนขี้เกียจ

• bower install higooglefonts

เหตุการณ์

Higooglefonts จัดเตรียมระบบเหตุการณ์ที่นักพัฒนาสามารถเชื่อมต่อได้ มันให้การแจ้งเตือนของลำดับการโหลดแบบอักษร

• selectedCallback - เหตุการณ์นี้จะถูกทริกเกอร์เมื่อเลือกแบบอักษร แต่ยังไม่ได้โหลด
• loadedCallback - เหตุการณ์นี้จะถูกทริกเกอร์เมื่อโหลดตัวอักษรและพร้อมใช้งาน นี่คือที่ที่คุณควรใช้แบบอักษรกับองค์ประกอบ

ตัวติดตามแมลง

มีข้อผิดพลาด? โปรดสร้างปัญหาที่นี่บน GitHub

https://github.com/saadqbal/higooglefonts/issues

ผู้เขียน

Asad Iqbal

• http://twitter.com/saadqbal
• http://github.com/saadqbal

ลิขสิทธิ์และใบอนุญาต

ลิขสิทธิ์ 2016 Hiwaas, Inc.

ได้รับใบอนุญาตภายใต้ใบอนุญาต Apache เวอร์ชัน 2.0 ("ใบอนุญาต"); คุณไม่สามารถใช้งานนี้ยกเว้นตามใบอนุญาต คุณอาจได้รับสำเนาใบอนุญาตในไฟล์ใบอนุญาตหรือที่:

http://www.apache.org/licenses/license-2.0

เว้นแต่ว่ากฎหมายที่บังคับใช้หรือตกลงเป็นลายลักษณ์อักษรซอฟต์แวร์ที่แจกจ่ายภายใต้ใบอนุญาตจะถูกแจกจ่ายตาม "ตามพื้นฐาน" โดยไม่มีการรับประกันหรือเงื่อนไขใด ๆ ไม่ว่าจะโดยชัดแจ้งหรือโดยนัย ดูใบอนุญาตสำหรับภาษาเฉพาะที่ควบคุมการอนุญาตและข้อ จำกัด ภายใต้ใบอนุญาต