Использование @ font-face для кнопок со значками и текстом

Question

На днях я путешествовал по кругу и остановился на http://www.justbenicestudio.com/studio/websymbols, где была хорошая статья об использовании @ font-face для иконок на веб-сайтах. Цитируя автора: «В карьере каждого интерактивного дизайнера есть те моменты, когда ему надоело создавать один и тот же набор графики для каждого сайта, который он разрабатывает».

Мне было любопытно, будет ли @ font-face работать для приложения, над которым я работаю. Проверьте тест .

Это не идеально, поэтому я ищу предложения и мнения, прежде чем приступить к реализации. Вы думаете, что это слишком рано? Трата времени? Или это самая удивительная вещь со времен ajax?

Answer 1

Я использовал @ font-face только для текста, но в той ссылке, которую вы разместили, кнопка выглядит великолепно. Единственное несоответствие, которое я нахожу, заключается в кросс-браузерной «совместимости» (но только с точки зрения дизайна). Это незначительные проблемы, и они не существуют, если вы разрабатываете для мобильных устройств (вы упомянули приложение). Браузеры отображают шрифт по-разному, когда это текст (например, IE9 не выделяет курсив, но рендер менее пикселизирован, чем хром).

Я думаю, что это проблема адаптируемости против внешности. Кнопки, сделанные с изображениями (желательно спрайты, на мой вкус), всегда будут выглядеть хорошо, но вы должны редактировать изображения каждый раз, когда хотите создать новую кнопку. Кнопки с @ font-face легко скопировать и изменить, плюс они могут помочь с SEO, но у вас есть разница в рендеринге в браузерах.

Answer 2

Я бы лично предположил, что это слишком рано, большинство браузеров поддерживают @ font-face, поэтому вы будете в относительной безопасности, но я не вижу веской причины не рисковать и не создавать изображение.Вероятно, вы экономите пользователю больше времени и полосы пропускания, предоставляя им одно маленькое изображение, а не весь шрифт.Если вы используете фоторедактор, такой как photoshop или gimp, просто сохраните ваши файлы, и они будут готовы в следующий раз, когда они вам понадобятся.