Cufon Font ашиглах талаар

Куфон фонт хэрхэн ашиглах талаар нийтлэл оруулхаар шийдлээ. Хэдэн жилийн өмнө вэбд өөр төрөлийн фонт ашиглах боломж маш хязгаарлагдмал байсан. Технологи хөгжих хэрээр Typekit, Font Face, Cufon зэрэг энэ төрөлийн олон болмжууд нээлттэй болсон. Үүний нэг нь куфон фонт юм. Куфон нь энгийн фонтыг вектор формат (SVG) ашиглан Javascript ээр зурж харуулдаг. Хэрэглэхэд маш энгийн бөгөөд jQuery, cufon-yui.js байхад хангалттай.

Куфон фонтыг хэрхэн ашиглах вэ ?

АЛХАМ 1 – КУФОН JS ИЙГ ТАТАЖ АВАХ

Куфон фонт JS файлын шахсан хувилбарыг, дараах холбоосоор орж татаж авна. cufón website. Үүний дараа өөрийн серверлүү хуулах хэрэгтэй.

Шинэ хувилбар ? Зөвхөн хуучин байсан cufon-yui.js файлаа дарж хуулах хэрэгтэй бөгөөд. Фонтоо дахин хөрвүүлэх шаардлаггүй.

Хэрэв чи Javascript-ийн мэдлэг сайтай бөгөөд чамд ямар нэгэн проблем асуудал тулгарсан бол шахаагүй хувилбарыг GitHub аас татаж авах боломжтой.

алхам 2 – Фонтоо хөрвүүлэх

Куфон фонтыг хөрвүүлэхдээ хөрвүүлэгч сайт руу орж өөрийн фонтын файлуудыг хуулж өгнө.

Илүү ойлгомжтой болгож өгөх үүднээс дээр видеог бэлдэн орууллаа. Өөрийн фонтыг хөрвүүлэхдээ видеог дагаж хийхэд асуудалгүй байх. Фонт хөрвүүлэхдээ Unicode төрлийн фонт оруулах хэрэгтэй гэдгийг анхаарах хэрэгтэй.

алхам 3 – текст солих



	
		
		
		
		
	
	

This text will be shown in Vegur.

Эхлээд jQuery.js ийг оруулж ирэх хэрэгтэй. Дараа нь YUI compressed файлыг оруулж ирнэ. Дээр жишээ байдлаар HTML бичиглэлийг харууллаа. Дараа нь Алхам 2 дээр хөрвүүлсэн файлаа оруулж ирнэ. Дээрх жишээн дээр байгаа <h1> байрлах текстыг куфон фонтоор хэвжүүлэхийн тулд дараах байдлаар зааж өгнө Cufon.replace('h1'). Фонтын хэмжээ болон өргөн зэргийг CSS ийн хэвжүүлэлтээр шийдэж өгөх хэрэгтэй. Фонт солихдоо гаднаас JS файлд дуудаж байгаа нөхцөлд Cufon.replace хэсгийг $(document).ready эсвэл өөрийн тодорхойлсон функцд бичиж өгнө.

алхам 4 – Internet Explorer дээрх асуудлыг шийдвэрлэх

Internet Explorer дээр куфон фонт нь бага зэрэг асуудалтай гардаг учруус дараах байдлаар шийдвэрлэж өгнө. Ингэхийн тулд </body> хаагдахын өмнө доорх кодыг оруулж өгдөг.

Олон фонт ашиглах

Олон төрөлийн фонтыг зэрэг ашиглах боломжтой бөгөөд хөрвүүлсэн фонтыг файлуудыг доорх байдлаар оруулж ирэх хэрэгтэй.



	
		
		
		
		
		
	
	

This text will be shown in Vegur.


This text will be shown in Myriad Pro.

WordPress, Joomla дээр ашиглах гэж байгаа нөхцөлд өөр өөрт нь зориулсан Plugin уудыг суулгахад л болно. Мөн WordPress-ийн Premium Theme-үүд өөртөө куфон фонтын тохиргоо агуулсан байдаг бөгөөд та зөвхөн өөрийн фонтыг хөрвүүлээд сайтдаа оруулж ирхэд л хангалттай.

Comments (3)

  1. hi. bi wordpress blog hutluj ehelj bgaa yum. bichsen zuilee hamgaalah gsn yum. copy hiih ghleer anhuuruulga garch irdeg tohirgoo bdag uu? hicheeluudee urgeljluulj hiigeerei. amjilt

Leave a Comment