Вопрос возник после прочтения нескольких тем, после чего пришла идея использовать иконочные шрифты на сайте)
Вопрос в следующем, допустим есть набор из 100 иконок (картинок) 128х128рх которые часто применяются на сайте в разных размерах.
Вывожу одни и те же картинки изменяя стилями под нужный размер…
Как бы картинки кешируются — тут вроде все нормально.
А если "преобразовать все картинки в шрифт и использовать его — какие тут могут быть недостатки в плане скорости формирования страницы?
Есть ли вообще какие либо "подводные камни"?
#1
18 июня 2014 в 16:43
В скорости формирования будет только то что если на странице используется 1 иконка шрифта то она все равно загрузить все ваши 128 из шрифта, хотя нынешние браузеры уже кеширует фонты, мобильные версии не все еще так умные.
Ну и вопрос в том что вы не сделаете полноцветной иконки, всегда будет 1 цвет.
Ну и вопрос в том что вы не сделаете полноцветной иконки, всегда будет 1 цвет.
#3
18 июня 2014 в 17:07
reload, 1 главный камень — если отключены в браузере картинки, как быть?) Мало кто конечно таким страдает, тем не менее, исключать этого не стоит. Разве что делать какую-то проверку, в зависимости включены или отключены.
Сегодня в 13:26
#4
18 июня 2014 в 17:16
reload, со шрифтами, которые вы сами подключаете, в опере например, довольно часто что нибудь случается: либо букв вообще нет, хотя они есть, но совершенно невидимые, либо шрифт просто не работает. И происходит само по себе: то работает, то не работает.
#5
18 июня 2014 в 17:33
Нет, все продумано) фон и цвет настраивается как у большинства иконок… цвет шрифта задается в css и там же фон...Ну и вопрос в том что вы не сделаете полноцветной иконки, всегда будет 1 цвет.
А вот то что из-за одной иконки будут подгружаться все, конечно не совсем по феншую...
так их и не будет) будет шрифт!1 главный камень — если отключены в браузере картинки, как быть?)
под все браузеры можно сделать… но то что браузеры сами по себе временами тупят, тут конечно ничего не сделать(со шрифтами, которые вы сами подключаете, в опере например, довольно часто что нибудь случается
#6
18 июня 2014 в 17:52
Достоинства:
1. шрифт загружается одним не очень большим (читай — грузится быстро) файлом.
2. загрузится, даже если картинки и js отключены страдающим от паранойи посетителем.
3. свободных шрифтов достаточно много.
Недостатки:
1. Подключение достаточно муторное
2. Очень старые браузеры могут не поддерживать свойство css, подключающее шрифты
3. Не все шрифты свободны. Это как раз связано с конвертером шрифтов — конвертер отказывается конвертировать несвободные шрифты. На сайтах шрифтов выложен, как правило, только ttf.
1. шрифт загружается одним не очень большим (читай — грузится быстро) файлом.
2. загрузится, даже если картинки и js отключены страдающим от паранойи посетителем.
3. свободных шрифтов достаточно много.
Недостатки:
1. Подключение достаточно муторное
2. Очень старые браузеры могут не поддерживать свойство css, подключающее шрифты
3. Не все шрифты свободны. Это как раз связано с конвертером шрифтов — конвертер отказывается конвертировать несвободные шрифты. На сайтах шрифтов выложен, как правило, только ttf.
#7
18 июня 2014 в 18:03
Странник, из своих картинок мы ведь создаем свой уникальный шрифт!
или я что то путаю?)
или я что то путаю?)
#8
18 июня 2014 в 18:30
Давно использую иконочный шрифт, огромный плюс для меня это быстрота работы с ними, записал цвет и размер и все готово, а для картинки открыть фотошоп поработать там несколько минут а потом уже ставить его на сайт.
Не все шрифты свободны. Это как раз связано с конвертером шрифтов — конвертер отказывается конвертировать несвободные шрифты. На сайтах шрифтов выложен, как правило, только ttf.
Свыше 400 оптимизированных бесплатных вебшрифтов на любой вкус — webfont.ru/
Дают сразу код подключения, и полный пакет — css, eot, ttf, woff. Некоторые шрифты идут сразу семьями.
#10
18 июня 2014 в 20:40
Думаю reload, имел ввиду шрифт-иконок, вроде как Font Awesome
#11
18 июня 2014 в 23:19
Именно то! по описанию вроде сложно перепутатьДумаю reload, имел ввиду шрифт-иконок, вроде как Font Awesome
"икончный шрифт = шрифт из иконок"
Только у меня свой личный набор картинок-иконок с размерами около 128х128рх
Их и думаю перевести в шрифт…
Из плюсов, удобное масштабирование и управление цветом, а минусы хотел узнать...
Не все ведь такое применяют, хотя обычные иконки вроде логичней шрифтами забросить — видать не все тут гладко)
Гоша с Яшей до сих пор спрайты штампуют…
Но у меня вопрос не по обычным маленьким иконочкам, а по более большим (элементы визуальной навигации)
Картинки конечно все оптимизированы, но в работе со шрифтами больше своды — легче управлять стилями (цвет, тень, прозрачность, размер) и все на лету, допустим при наведении курсора…
#12
19 июня 2014 в 07:05
Картинки конечно все оптимизированы, но в работе со шрифтами больше своды — легче управлять стилями (цвет, тень, прозрачность, размер) и все на лету, допустим при наведении курсора..
Ну если вы смотрите удобство по этим параметрам то имее смысл вообще отказаться от шрифтов в пользу SVG если интересно то вот сравнение использования шрифтов против svg inline графики
css-tricks.com/icon-fonts-vs-svg/
свое мнение высказал гуру CSS
#13
19 июня 2014 в 08:05
maxisoft, эх, а подобных мнений на русском нема? 
#14
19 июня 2014 в 10:50
Ну и конечно же, где посмотреть на всю красоту кривой вёрстки, если не на таком сайте:css-tricks.com
3.firepic.org/3/images/2014-06/19/2979t8ktz08a.png
vs
3.firepic.org/3/images/2014-06/19/f25swb0597bd.png
#15
19 июня 2014 в 13:04
Ну если вы смотрите удобство по этим параметрам то имее смысл вообще отказаться от шрифтов в пользу SVG
… кстати вынужден с вами таки согласиться!)
maxisoft, спасибо за наводку!