Ръководство за по-добри и по-отчетливи икони с потребителски интерфейс с уеб шрифтове

Ако сте запознати с използването на формати на растерни изображения (като PNG и GIF) за показване на икони в даден уебсайт, тогава ще сте запознати и с неговите недостатъци. Първо, в зависимост от размера и колко информация за цвета, която има иконата, размерът на файла с икони може да бъде много голям.

Ако имаме твърде много икони, които да бъдат поставени в даден уебсайт, това също ще доведе до забавяне на ефективността на уебсайта, тъй като много браузъри трябва да извършват много HTTP заявки. Въпреки че този проблем може да бъде решен с CSS спрайт, размерът на файла все още е голям.

Иконата Bitmap също има недостатъци в гъвкавостта и мащабируемостта; да кажем, че трябва да увеличим или увеличим иконата до определено ниво, или да я прегледаме чрез много висока резолюция на екрана, например на дисплея на ретината; иконата определено ще бъде Оказва се, че изглежда размазано.

Е, ако вземете под внимание някои от тези въпроси по-горе, вероятно ще трябва да използвате шрифтовете на иконите.

Използване на икони Шрифтове

Една икона шрифт е набор от икони, опаковани в уеб шрифт, който по-късно може да бъде вграден в уебсайт с помощта на @ Шрифт лице. Както посочи Крис в CSS-trick, има много ползи от използването на шрифт върху изображението, за да се доставят икони;

Шрифтът е обект, базиран на вектор, който по своя характер е независим от резолюцията, така че иконата ще остане ясна в различни резолюции на екрана, включително много високи разделителни способности на екрана (като нивото на ретината).
Също така е мащабируем, което позволява да се разширява на много нива без да се губи качество и прецизност.
Тъй като иконата е основно шрифт, можем също така да контролираме цвета, прозрачността, текстовата сянка и дори да я преоразмеряваме чрез стиловия лист
Можем също да анимираме иконата с CSS3.
Иконата се извиква с @ Шрифт лице правило, което се поддържа още от Internet Explorer 4 (с .eot).
По-малка HTTP заявка и по-нисък размер на файла.

Ето някои от най-добрите безплатни шрифтове за икони, които можем да намерим:

Шрифт Awesome
IcoMoon
Икони на социалните медии
Икони на Фондация Зърб

Уверете се, че сте проверили и следвали лиценза, преди да го вградите в уебсайта си, за да уважавате времето и упоритата работа на автора.

@ font-face Правило

Както споменахме, иконите са вградени с помощта на @ Шрифт лице управлявайте чрез таблицата със стилове, която дефинира нова шрифтово семейство. В следващия пример ще използваме Web Symbols;

 @ font-face семейство на шрифтове: 'WebSymbolsRegular'; src: url ('fonts / websymbols-regular-webfont.eot'); src: формат url (формат „fonts / websymbols-regular-webfont.eot? #iefix“) („embedded-opentype“), формат url („fonts / websymbols-regular-webfont.woff“) („woff“), URL адрес ('fonts / websymbols-regular-webfont.ttf') формат ('truetype'), url ('fonts / websymbols-regular-webfont.svg # WebSymbolsRegular') формат ('svg');

След това в HTML документа трябва само да добавим знаците, които представляват иконата, а не да прилагаме новите шрифтово семейство Широко в документа, можем да направим по-конкретно, като добавим допълнителен клас към определени елементи, че иконата трябва да се превърне в, така;

  з
 аз
 к
 А
 аз

Обратно към таблицата със стилове, ние дефинираме новото шрифтово семейство за този клас, който току-що добавихме:

 .icon-font семейство на шрифтове: WebSymbolsRegular; размер на шрифта: 12pt;

Демо @ font-face

Използване на псевдо-елементи

Ако иконата се третира като страничен елемент, ние можем също така да доставим иконата псевдо-елемент. Ако приемем, че нашата HTML маркировка е както следва:

  Отговор
 Отговори на всички
 напред
 Прикачен файл
 Изображение

Можем да го направим по този начин в таблицата със стилове:

 ul.icon-font.pseudo li: before font-family: WebSymbolsRegular; margin-right: 5px;  ul.icon-font.pseudo li: nth-child (1): преди content: "h";  ul.icon-font.pseudo li: nth-child (2): преди content: "i";  ul.icon-font.pseudo li: nth-child (3): преди content: "j";  ul.icon-font.pseudo li: nth-child (4): преди content: "A";  ul.icon-font.pseudo li: nth-child (5): преди content: "I";

Демо псевдоелемент

Частно използване на Unicode

Има обстоятелство, при което иконите не са вградени с букви (A, B, C, D и т.н.), а са вградени в Unicode Private Use, за да се сведе до минимум сблъсъка между символите. Подобно на FontAwesome, авторът щастие е добавил всички символни кодове в стиловия лист, който изглежда така;

 .стъклена икона: преди съдържание: "f0c6";

Но когато трябва да вмъкнем иконата директно в HTML, нещо като следния код \ f0c6 няма да визуализира посочената икона, тъй като не е валиден знак, кодиран в HTML.

HTML се нуждае от цифров референтен код за изобразяване на специални символи. Разгледахме го малко по-рано в предишния ни урок за бутоните CSS3; този знак се предхожда от комбинация от знак за амперсанд (&), хеш знак (#) и х след това последвано от шестнадесетично число, което представя символа.

Например, f0c6 е шестнадесетично число, така че числовата препратка в HTML ще бъде & # Xf0c6;, в FontAwesome този код ще покаже икона за кламер, така;

Демо Unicode

Подреждане на шрифт

Иконите в колекцията може да не са всички необходими. В този случай можем да премахнем неизползваните символи, като подредим шрифта, който също ще бъде резултатът е по-малък размер на шрифта. За щастие, има удобен инструмент от FontSquirrel, който лесно може да направи тази работа, @ font-face generator.

След като отидете на тази страница и добавите шрифта, изберете Експерт. Ще видите още няколко опции; изберете Персонализирано подреждане.

В този пример използваме шрифта Sociolico за показване на икони на социалните медии в нашия уебсайт, но иконите, от които ще се нуждаем, са само Dribble, Facebook и Twitter, които съответно са представени от тези знаци; d, f и T. Затова поставете тези знаци в полето за въвеждане на единични знаци, както следва:

И ние сме готови. Сега можем да изтеглим шрифта и в моя случай размерът на шрифта се оказа само 3Kb до 5Kb. Също така не забравяйте, че единствените символи ще се визуализират в иконата са само d, f и t, докато другите знаци ще се визуализират само като обикновени писма.

Заключителна мисъл

Едно нещо, което не можем да направим при тази практика, е да добавяме много подробни ефекти като тази към иконата.

Въпреки това, ако цялостният ни дизайн не изисква подробности на това ниво, този подход може да бъде по-добър начин за обслужване на икони в уебсайтовете. Има гъвкавост, мащабируемост, готова за ретина с много малък размер на файла, какво друго можем да поискаме?

И накрая, ако искате да се потопите по-задълбочено в тази тема, по-долу сме събрали няколко полезни препратки, както и нашата демо версия и изходния код за изтегляне.

Как да направите своя собствена икона Webfont - WebDesignerDepot.com
Показване на шрифтове и атрибути за данни - 24Ways
Unicode за лично ползване - Уикипедия

Демонстрация
Изтеглете Източник