Comments 42
На мой взгляд лучше заранее перегнать в png, который выглядит гораздо лучше. К примеру у меня в W7/Chrome это выглядит так:

PS Пост про шрифт без картинки это как блудницы в сауне в парандже.
А если понадобится быстро изменить размеры иконок или их цвет? Тогда вариант со шрифтом в самый раз.
Что значит «понадобится быстро»? ) Отрендеренный спрайт с иконками 16, 24, 32 в двух вариациях — черный и белый покроет 99% всех проектов :)
Ну мы же не будете отрицать, что вариант со спрайтом — более трудоемкий и менее гибкий? :) А если, к примеру, на каком-нибудь финальном этапе разработки заказчик попросит уменьшить иконки на всех кнопках по сайту, а размеры кнопок увеличит — вы просто задолбетесь рендерить заново, задавать новые координаты спрайта и прочее. Или не размер, а цвет самой иконки — сделать не черной, а #666 — опять грузить фотошоп и там развлекаться?
А с предложенным вариантом можно просто зайти в css и изменить несколько строк кода.
Ну так рендерить то не обязательно руками :)
На этапе разработки — отличное решение. Перед релизом же, когда уже заказчик определился фиолетовые ему иконки или салатовые — уже и отрендерить неплохо )
Релиз — релизом, но как быть с дальнейшей поддержкой проекта? Особенно если он перейдет в руки другому разработчику без исходников в psd :)
Все-таки, я останусь при том мнении, что перегон в png в данном случае — лишняя итерация и опциональное усложнение. Не для того Bootstrap создавался :)
Т.е. вы оставите кривые иконки в проекте только из-за идеологии одного из используемых инструментов?
Думаю, я буду исходить из той задачи, которая мне поставлена. Иконки-то кривые не из-за того что они криво нарисованы, а из-за особенностей рендеринга шрифтов. К примеру, на мобильном девайсе они смотрятся отлично, со сглаживанием. Поэтому на сайте под смартфоны я бы их применил. Плюс, будет элемент оптимизации — я не уверен, но есть подозрения, что шрифтовой файл будет весить меньше пачки png со всеми нужными мне вариантами.
Это зависит от операционной системы. Значок «Refresh» в неувеличенном виде явно рассчитан на DirectWrite от Windows 7, а не на ClearType под GDI+ от Windows XP.
В случае IE не зависит, так как 9-я на Windows XP не встанет.
Да и что греха таить, в хроме и под семеркой лесенка.
Это недофича с их стороны: в IE9 DirectWrite, в Файерфоксе также DirectWrite, а в Хроме, вишь ли, лесенка.
Даже если будут, то обычно набор браузеров при заказе сайта идет одним пакетом, из которого хром не выбросить, а делать отдельную развилку стилей — лишняя трата времени
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
> А если, к примеру, на каком-нибудь финальном этапе разработки заказчик попросит уменьшить иконки на всех кнопках по сайту, а размеры кнопок увеличит
А если попросит сделать стрелочку покороче, кружок по приплюснотее, а корзинку без одного колесика и перечеркнутую?

Все «А если» Либо уже оплачены, либо должны быть оплачены. А шрифт использовать или спрайты — у каждого своя религия =)
Чтобы сделать приблизительно цвет #666 чёрным иконкам, достаточно задать css свойство opacity: 0.9 или 0.8
Это также позволит сделать их под цвет фона.
И еще момент — в этой статье шрифт указан в качестве приложения к Twitter Bootstrap, а этот фреймворк как раз подразумевает такой подход, используя налево и направо Css3 и максимальный отказ от лишних изображений, что делает его максимально гибким
Нет, в винде включено. Я так понимаю это особенности вебкита.
Я уже пытался внедрить этот шрифт у себя в суфти — там клиент с вебкит контейнером. Наступил на грабли с антиалиасингом и забил.
Ну, так тогда это проблема вебкита, а не шрифта же. Заведите баг им, в конце концов.
Вы довольно безапелляционно сказали, что png выглядит лучше. Так вот он, как минимум, редко выглядит не лучше, а на отзумленных страницах(у меня всегда зум больше 100%) всегда выглядит хуже
Я сказал дословно «На мой взгляд лучше заранее перегнать в png, который выглядит гораздо лучше».
Ключевой момент «на мой взгляд».
Я питал надежду, может быть наивную, что последний абзац моей блогозаписи доносит мысль о том, что скриншот шрифта сильно зависит от операционной системы и её настроек. Я мог бы, например, сделать скриншот в Windows XP со включённым ClearType, но это никак не помогло бы представить вид шрифта в Mac OS, или даже в Windows 7 со включённым DirectWrite.
Ну я бы сделал скриншот там где он нормально выглядит с Вашей же поправкой. Чтобы можно было получить представление о нем не переходя на сайт.
Хорошо, добавляю скриншот, но с нарочно увеличенным размером шрифта — чтобы дать представление скорее именно о шрифте, а не о каком-либо конкретном рендеринге его.
Я использую HTML KickStart, в котором для этих целей встроена поддержка схожего шрифта IcoMoon. Мне он кажется более симпатичным, однако, спасибо и за Font Awesome! Жалко только, что как и в бесплатном наборе IcoMoon, здесь тоже нет иконки для обозначения денег/оплаты, а также иконки с грузовиком (для обозначения наземной доставки).
UFO landed and left these words here
Загружаемые шрифты — это не всегда хорошо, потому что у пользователя может быть выключена опция «разрешать страницам использовать свои шрифты», тогда вместо значков становится видно чёрт знает что.

Кроме того, бывают проблемы с загрузкой шрифтов через прокси, например.
Наконец-то нормальные векторные иконки для Bootstrap'a! Раньше использовал WebSymbols, но эти более подходящие.
И лицензия очень вкусная:

> A mention of Font Awesome — fortawesome.github.com/Font-Awesome in human-readable source code is considered acceptable attribution (most common on the web).

Т.е. лепишь

перед тегом, подключающим стиль, и ты чист.
UFO landed and left these words here
Only those users with full accounts are able to leave comments. Log in, please.