Оправдано ли применение иконочных шрифтов?

#1 18 июня 2014 в 16:43
Вопрос возник после прочтения нескольких тем, после чего пришла идея использовать иконочные шрифты на сайте)

Вопрос в следующем, допустим есть набор из 100 иконок (картинок) 128х128рх которые часто применяются на сайте в разных размерах.
Вывожу одни и те же картинки изменяя стилями под нужный размер…
Как бы картинки кешируются — тут вроде все нормально.

А если "преобразовать все картинки в шрифт и использовать его — какие тут могут быть недостатки в плане скорости формирования страницы?
Есть ли вообще какие либо "подводные камни"?
#2 18 июня 2014 в 16:48
В скорости формирования будет только то что если на странице используется 1 иконка шрифта то она все равно загрузить все ваши 128 из шрифта, хотя нынешние браузеры уже кеширует фонты, мобильные версии не все еще так умные.

Ну и вопрос в том что вы не сделаете полноцветной иконки, всегда будет 1 цвет.
#3 18 июня 2014 в 17:07
reload, 1 главный камень — если отключены в браузере картинки, как быть?) Мало кто конечно таким страдает, тем не менее, исключать этого не стоит. Разве что делать какую-то проверку, в зависимости включены или отключены.
#4 18 июня 2014 в 17:16
reload, со шрифтами, которые вы сами подключаете, в опере например, довольно часто что нибудь случается: либо букв вообще нет, хотя они есть, но совершенно невидимые, либо шрифт просто не работает. И происходит само по себе: то работает, то не работает.
#5 18 июня 2014 в 17:33

Ну и вопрос в том что вы не сделаете полноцветной иконки, всегда будет 1 цвет.

maxisoft
Нет, все продумано) фон и цвет настраивается как у большинства иконок… цвет шрифта задается в css и там же фон...
А вот то что из-за одной иконки будут подгружаться все, конечно не совсем по феншую...

1 главный камень — если отключены в браузере картинки, как быть?)

scanread
так их и не будет) будет шрифт!

со шрифтами, которые вы сами подключаете, в опере например, довольно часто что нибудь случается

lokanaft
под все браузеры можно сделать… но то что браузеры сами по себе временами тупят, тут конечно ничего не сделать(
#6 18 июня 2014 в 17:52
Достоинства:
1. шрифт загружается одним не очень большим (читай — грузится быстро) файлом.
2. загрузится, даже если картинки и js отключены страдающим от паранойи посетителем.
3. свободных шрифтов достаточно много.
Недостатки:
1. Подключение достаточно муторное
2. Очень старые браузеры могут не поддерживать свойство css, подключающее шрифты
3. Не все шрифты свободны. Это как раз связано с конвертером шрифтов — конвертер отказывается конвертировать несвободные шрифты. На сайтах шрифтов выложен, как правило, только ttf.
#7 18 июня 2014 в 18:03
Странник, из своих картинок мы ведь создаем свой уникальный шрифт!
или я что то путаю?)
#8 18 июня 2014 в 18:30
Давно использую иконочный шрифт, огромный плюс для меня это быстрота работы с ними, записал цвет и размер и все готово, а для картинки открыть фотошоп поработать там несколько минут а потом уже ставить его на сайт.
#9 18 июня 2014 в 19:48

Не все шрифты свободны. Это как раз связано с конвертером шрифтов — конвертер отказывается конвертировать несвободные шрифты. На сайтах шрифтов выложен, как правило, только ttf.

Странник

Свыше 400 оптимизированных бесплатных вебшрифтов на любой вкус — webfont.ru/
Дают сразу код подключения, и полный пакет — css, eot, ttf, woff. Некоторые шрифты идут сразу семьями.
#10 18 июня 2014 в 20:40
Думаю reload, имел ввиду шрифт-иконок, вроде как Font Awesome
#11 18 июня 2014 в 23:19

Думаю reload, имел ввиду шрифт-иконок, вроде как Font Awesome

Evanescence
Именно то! по описанию вроде сложно перепутать
"икончный шрифт = шрифт из иконок" laugh
Только у меня свой личный набор картинок-иконок с размерами около 128х128рх
Их и думаю перевести в шрифт…
Из плюсов, удобное масштабирование и управление цветом, а минусы хотел узнать...

Не все ведь такое применяют, хотя обычные иконки вроде логичней шрифтами забросить — видать не все тут гладко)
Гоша с Яшей до сих пор спрайты штампуют…

Но у меня вопрос не по обычным маленьким иконочкам, а по более большим (элементы визуальной навигации)
Картинки конечно все оптимизированы, но в работе со шрифтами больше своды — легче управлять стилями (цвет, тень, прозрачность, размер) и все на лету, допустим при наведении курсора…
#12 19 июня 2014 в 07:05

Картинки конечно все оптимизированы, но в работе со шрифтами больше своды — легче управлять стилями (цвет, тень, прозрачность, размер) и все на лету, допустим при наведении курсора..

reload

Ну если вы смотрите удобство по этим параметрам то имее смысл вообще отказаться от шрифтов в пользу SVG если интересно то вот сравнение использования шрифтов против svg inline графики

css-tricks.com/icon-fonts-vs-svg/

свое мнение высказал гуру CSS
#13 19 июня 2014 в 08:05
maxisoft, эх, а подобных мнений на русском нема? scratch
#15 19 июня 2014 в 13:04

Ну если вы смотрите удобство по этим параметрам то имее смысл вообще отказаться от шрифтов в пользу SVG

maxisoft

кстати вынужден с вами таки согласиться!)

maxisoft, спасибо за наводку!
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Похожие темы

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.