Водич за боље и оштрије иконе корисничког интерфејса са веб фонтовима

Ако сте упознати са употребом формата битмап слика (као што су ПНГ и ГИФ) за приказивање икона на веб локацији, онда бисте такође били упознати са његовим недостацима. Пре свега, у зависности од димензије и броја информација о боји које има икона, величина датотеке иконе може бити веома велика.

Ако имамо превише икона за постављање на веб сајт, то ће такође потенцијално успорити перформансе веб-сајта, пошто многи претраживачи морају да воде ХТТП захтеве. Иако се овај проблем може ријешити помоћу ЦСС-а, величина датотеке је и даље велика.

Битмап икона такође има недостатке у флексибилности и скалабилности; рецимо да морамо да увећамо или зумирамо икону до одређеног нивоа, или да је гледамо кроз веома високу резолуцију екрана, као што је на дисплеју мрежнице; икона ће дефинитивно испадне изгледа мутно.

Па, ако узмете у обзир неке од горе наведених ствари, вероватно ћете морати да користите фонтове икона.

Коришћење Ицон Фонтова

Ан ицон фонт је скуп икона упакованих у веб фонт који се касније може уградити на веб страницу помоћу @ фонт-фаце. Као што је Цхрис у ЦСС-трику истакао, постоје многе предности коришћења фонта на слици за испоруку икона;

• Фонт је објекат заснован на векторима који је, по својој природи, независан од резолуције, тако да ће икона остати јасна у разним резолуцијама екрана, укључујући веома високе резолуције екрана (као што је ниво ретине).
• Такође је скалабилан, омогућавајући му да се увећа на више нивоа без губитка квалитета и прецизности.
• Пошто је икона у основи фонт, такође можемо да контролишемо боју, транспарентност, текст-сенку и чак да је променимо кроз стилску табелу
• Исто тако можемо анимирати икону помоћу ЦСС3.
• Икона се зове са @ фонт-фаце правило које је подржано већ у програму Интернет Екплорер 4 (са .еот).
• Мањи ХТТП захтјев и мања величина датотеке.

Ево неких од најбољих бесплатних фонтова икона које можемо пронаћи:

• Фонт Авесоме
• ИцоМоон
• Социал Медиа Ицонс
• Зурб Фоундатион Ицонс

Проверите да ли сте проверили и следили лиценцу пре него што сте је уграђивали у вашу веб локацију да бисте поштовали ауторско време и напоран рад.

@ фонт-фаце Правило

Као што смо споменули, иконе су уграђене користећи @ фонт-фаце правило кроз стилски лист који дефинише ново породица фонтова. У следећем примеру ћемо користити Веб симболе;

 @ фонт-фаце фонт-фамили: 'ВебСимболсРегулар'; срц: урл ('фонтс / вебсимболс-регулар-вебфонт.еот'); формат срц: урл ('фонтс / вебсимболс-регулар-вебфонт.еот? #иефик') формат ('ембеддед-опентипе'), урл ('фонтс / вебсимболс-регулар-вебфонт.вофф') формат ('вофф'), урл ('фонтс / вебсимболс-регулар-вебфонт.ттф') формат ('труетипе'), урл ('фонтс / вебсимболс-регулар-вебфонт.свг # ВебСимболсРегулар') формат ('свг');  

Затим, у ХТМЛ документу, треба само да додамо знакове који представљају икону, а не да примењујемо нови породица фонтова Широко у документу, можемо конкретније додати додавањем додатне класе одређеним елементима да би се икона требала претворити у, као што је то случај;

 
 
х
 
и
 
ј
 
А
 
И
 
 

Повратак на стилску табелу, дефинишемо нови породица фонтова за ту класу коју смо управо додали:

 .ицон-фонт фонт-фамили: ВебСимболсРегулар; фонт-сизе: 12пт;  

• Демо @ фонт-фаце

Коришћење псеудо-елемената

Ако се икона третира као бочни елемент, можемо и испоручити икону псеудо-елемент. Под претпоставком да је наша ХТМЛ ознака следећа:

 
 
Одговорити
 
Одговори свима
 
Напријед
 
Прилог
 
Слика
 
 

Можемо то урадити на тај начин у стилу:

 ул.ицон-фонт.псеудо ли: бефоре фонт-фамили: ВебСимболсРегулар; маргин-ригхт: 5пк;  ул.ицон-фонт.псеудо ли: нтх-цхилд (1): пред цонтент: "х";  ул.ицон-фонт.псеудо ли: нтх-цхилд (2): пред цонтент: "и";  ул.ицон-фонт.псеудо ли: нтх-цхилд (3): пред цонтент: "ј";  ул.ицон-фонт.псеудо ли: нтх-цхилд (4): пред цонтент: "А";  ул.ицон-фонт.псеудо ли: нтх-цхилд (5): пред цонтент: "И";  

• Демо Псеудо-елемент

Приватна употреба Уницоде

Постоји околност у којој иконе нису биле уграђене у слова (А, Б, Ц, Д, итд.), Већ су биле уграђене у Уницоде Привате Усе како би се минимизирало сукобљавање међу знаковима. Као и код ФонтАвесоме, аутор је срећом додао све кодове знакова у стилу, који изгледа овако;

 .ицон-гласс: бефоре цонтент: "ф0ц6";  

Али када морамо да убацимо икону директно у ХТМЛ, нешто као следећи код ф0ц6 неће приказати истакнуту икону, јер није важећи знак кодиран у ХТМЛ-у.

ХТМЛ-у је потребна нумеричка референтна ознака за приказ посебних знакова. О томе смо мало разговарали у нашем претходном водичу о ЦСС3 тастерима; овај знак има префикс комбинације знака за знак (&), знак хеш (#) и један Икс затим слиједи хексадецимални број који представља знак.

На пример, ф0ц6 је хексадецимални број, тако да ће бити нумеричка референца знакова у ХТМЛ-у & # кф0ц6;, у ФонтАвесоме тај код ће приказати икона спајалице, овако;

• Демо Уницоде

Подређивање фонта

Иконе у колекцији можда нису све потребне. У том случају можемо избацити неискоришћене знакове тако што ћемо подесити фонт који ће такође бити резултира у нижим величинама датотека фонта. На срећу, ту је и практичан алат за ФонтСкуиррел да лако уради овај посао, @ фонт-фаце генератор.

Када одете на ту страницу и додате фонт, изаберите Екперт. Видећете још опција; изаберите Цустом Субсеттинг.

У овом примеру, ми користимо Социолицо фонт за приказивање икона друштвених медија на нашем веб сајту, али иконе које су нам потребне су само Дриббле, Фацебоок и Твиттер које су представљене тим ликовима; д, ф и т. Дакле, ставите те знакове у поље за унос појединачних знакова на следећи начин:

И завршили смо. Сада можемо скинути фонт, ау мом случају величина фонта се показала само 3Кб до 5Кб. Такође запамтите да су то једини ликови ће се приказати у икону само д, ф и т, док ће остали знакови бити само регуларно писмо.

Финал Тхоугхт

Једна ствар коју не можемо да урадимо на овој пракси је додавање веома детаљних ефеката као што је овај на икону.

Међутим, ако наш цјелокупни дизајн не захтијева детаље на том нивоу, овај приступ би могао бити бољи начин за послуживање икона на веб-локацијама. Она има флексибилност, скалабилност, спремна је за ретину са веома малом величином датотеке, што још можемо тражити?

На крају, ако желите да дубље зароните у ову тему, испод смо саставили неколико корисних референци, као и наш демо и изворни код за преузимање.

• Како направити властиту икону Вебфонт - ВебДесигнерДепот.цом
• Приказивање фонтова и атрибута података - 24Ваис
• Приватна употреба Уницоде - Википедиа

• Демо
• Довнлоад Соурце