Иконни шрифтове и защо не са необходими - Николай Громов
почивай в мир икона технология на шрифта
Шрифтовете с икони са шрифтове, които използват икони вместо букви.
За предпочитане е векторно изображение за икони:
- мащабируеми без загуба на качество
- няма нужда от ретиниране
- лесен за редактиране (по отношение на шрифтовете на иконите - условно)
Винаги сме искали векторни икони, но нямахме поддръжка за SVG (SVG се роди в началото на 2000-те, но добрата поддръжка на браузъра не дойде, докато IE8 не напусна). Но шрифтът може да бъде свързан към страницата дори в IE6. Всеки знак в шрифт е векторна форма. Съвсем логично е да се направи такъв шрифт, в който вместо букви се използват икони.
Как
Отидохме на fontello.com, потърсихме (удобно търсене, резултатът от търсенето за думата лайно е особено приятен) там необходимите икони и ги бутнахме с мишката, въведохме името на шрифта и изтеглихме. След това, за да вмъкнат иконата на правилното място, те написаха:
Трябваше да се промени размера - те посочиха font-size, беше необходимо да се промени цвета - те посочиха цвят, сянката - text-shadow. Имахме нужда от двуцветна икона - те я изкривиха, като насложиха един символ върху друг.
Модерна алтернатива
SVG. Векторен формат с отлична поддръжка на различни браузъри. Идеален за икони!
Шрифт на икона срещу SVG
След това ще съкратя „шрифт на икона“ на „ish“.
SW : Необходими са множество файлови формати на шрифтове, които да включите в страницата.SVG : един файл, който да управлява всички
SVG : една икона, един цвятSVG : толкова цвята, колкото искате
SVG : монолитенSVG : можете да контролирате части от иконата - стилове, скриптове
SW : Прилага изглаждане на шрифта на екрана (различна плътност при различни настройки ведна и съща ОС срещу различна ОС, липсващи редове в пиксели)SVG : без допълнително неуправляемо анти-алиасинг, много по-лесно за уцелване на пиксели на екрана
ISH : няма да се зареди — ще видим пукнатини, докато не се заредят стиловият файл и файлът с шрифтове — виждаме празнотатаSVG : зареждаме както искаме, можем да го вмъкнем в маркирането (ще видим дори и с незаредени стилове)
SVG : не работи в Opera miniSVG : работи в Opera mini
SVG : първоначално всички икони са пакетирани в един файл (въпреки че са необходими няколко файлови формата)SVG : трябва да ги пакетирате отделно, за да имате един SVG спрайт файл
Как безопасно да изхвърлите шрифта на иконата във вашия работен процес
Две опции за различни степени на потапяне в оформлението / интерфейса. Предполага се, че искате да работите с приблизително същия набор от икони, които можете да намерите на fontello.com.
Най-лесният вариант
Стъпка 1. Получаваме няколко SVG файла. Или намираме отделни SVG файлове в мрежата веднага (flaticon.com е особено добър!), Или получаваме SVG от шрифт на икона (който току-що беше направен на fontello.com) чрез услугата icomoon.io.
Стъпка 2. Пускаме го през оптимизатора.
Това ще ви позволи лесно да вмъкнете SVG и да избегнете искане на изображение към сървъра, но няма да ви позволи лесно да контролирате цвета на иконата.
Прост и добър избор
Стъпка 1. Получаваме набор от отделни SVG файлове или шрифт на икона от fontello.com. Ако това са отделни файлове, ги пускаме през оптимизатора.
Стъпка 2. Импортирайте това в icomoon.io и изберете всички икони. В настройките на проекта премахнете ненужните флагове, по-специално всички флагове на файлови формати (SVG така или иначе ще бъде изтеглен), щракнете върху „изтегляне“.
Стъпка 3.Взимаме файла symbol-defs.svg от изтегления архив (той съдържа библиотека със символи), вмъкваме този файл в маркирането и използваме SVG икони според принципа символ → използване. Получаваме възможността да контролираме размера и запълването на всяка икона.
хубав вариант
- Вземете набор от SVG файлове в папката на проекта
- Автоматично ги оптимизираме
- Свържете ги автоматично в SVG спрайт със символи
- Автоматично направете този SVG скрит
- Полученият SVG спрайт се вмъква в маркирането
- Използваме, за да вмъкнем икони на местата, от които се нуждаем. Има много опции как да вмъкнете това в маркирането: от обикновено gulp-file-include до PHP-shny включване.
Елементи 2-4 могат да бъдат изпълнени с една команда от конзолата. Предоставените връзки към инструменти за автоматизация са мои предпочитания, не е необходимо да ги използвам, има аналози.
Като алтернатива, вместо да вмъквате спрайт на страницата, можете да използвате JS, за да го запазите в localStorage на браузъра на посетителя и да го вмъкнете в маркирането със същия JS всеки път, когато страницата на сайта се отвори. Това е патерица и няма да работи, ако посетителят запази страницата на сайта на диск.
Как става при мен
Стартирам машината си с командата npm start. Освен всичко друго, машината събира SVG спрайт от SVG файлове, намиращи се в определена папка (те автоматично се минимизират предварително).
Трябва да добавите / премахнете икона - добавям / премахвам файл от папката и всичко автоматично се възстановява и актуализира в браузъра.
Вмъквам икони, като използвам връзка към конкретен знак в спрайта:
Единственият минус е липсата на поддръжка за добавяне на икони в IE. За корекция използвам svg4everybody.