Динамическая замена изображений Практические приемы и инструменты
Когда дело доходит до веб-дизайна, креативность дизайна не должна сдерживаться ограниченным выбором поддерживаемых веб-шрифтов, которые мы называем веб-безопасные шрифты. Дизайнеры должны иметь свободу использовать любые шрифты, которые они предпочитают в заголовках и содержимом.
В 2005 году динамическая замена изображений стала популярной с техникой под названием Масштабируемая замена вспышки Inman (sIFR). Разработан Шон Инман, SIFR использует преимущества Javascript и Adobe Flash, чтобы веб-дизайнеры могли использовать любые шрифты, которые им нравятся, на веб-сайте, и при этом сохранять видимость для тех, у кого этого шрифта нет. И так как сеть продолжает развиваться, сегодня у нас есть больше альтернативных решений, использующих различные технологии, на тот случай, если вы не совсем фанат Flash.
Без дальнейших церемоний, давайте посмотрим на некоторые из методы для достижения динамических замен изображений.
Обычно используемые методы
Вот некоторые из наиболее часто используемых методов динамической замены изображений.
Масштабируемая замена вспышки Inman (sIFR)
SIFR это один из самых популярных методов для вставки пользовательских шрифтов на веб-сайты. Он использует Javascript и Flash для создания настраиваемой гарнитуры для вашего сайта и позволяет выбирать конвертированную гарнитуру. Кроме того, преобразованный шрифт остается как текст в исходных кодах, поэтому поисковая система все еще может сканировать их.
SIFR 2 (рекомендуется) является текущим стабильным выпуском, однако, если вы ищете реализацию sIFR, вы должны также знать, что СиФР 3 бета-версия также доступна для скачивания. Это может быть немного глючно, но по крайней мере это решает проблему расширения шрифта SIFR 2.
Инструменты для SIFR, которые могут пригодиться:
- sIFRvaultsIFRvault - это хранилище шрифтов sIFR, которые вы можете скачать.
- Генератор СИФРОнлайн инструмент, который позволяет создавать файлы SIFR .swf несколькими щелчками мыши. Просто загрузите шрифт TTF шрифта, который вы хотите конвертировать, просмотреть и скачать.
- Конвертировать шрифты в SIFRЗагрузите шрифт .TTF, и на этом сайте он будет конвертирован в файл sIFR Flash..
SIFR Lite
Оригинальный sIFR - 22 КБ, поэтому Дейв решил переработать его, используя более объектно-ориентированный подход, и в результате? В 3 раза меньше при 3.7к.
Динамическая замена текста в PHP + CSS (P + C DTR)
Как следует из названия, это метод замены текста, который использует PHP и CSS, которые используют оригинальный метод, описанный Стюард розенбергер. Это также улучшение по сравнению с предыдущей версией, разработанной Р. Мари Кокс который не поддерживает перенос текста и внутренние теги. Еще одна интересная вещь в P + C DTR - текст изображения можно настраивать с помощью тегов CSS..
typeface.js
Что делает typeface.js Особенность в том, что они используют только Javascript для встраивания пользовательских шрифтов, а стиль можно дополнительно настроить с помощью HTML и CSS, Flash не требуется. Это открытый исходный код и поддерживает большинство браузеров, которые мы используем в наши дни, будь то Safari, Firefox, IE (6 и выше).
Лично после некоторых экспериментов с typeface.js мы думаем, что могут быть некоторые возможности для улучшений. Во-первых, шрифты имеют тенденцию немного отличаться в разных браузерах. Если вы используете typeface.js, мы рекомендуем вам выполнить кросс-браузерную проверку, прежде чем предположить, что то, что вы видите в Firefox, будет тем, что вы видите в Safari. Текст также нельзя выделить с помощью typeface.js.
Пользовательские шрифты в typeface.js не компилируются; Это означает, что пользователи могут загружать шрифты. Это может привести к проблеме авторского права. Рекомендуется тщательно проверить, чтобы убедиться, что используемые шрифты подходят для повторного распространения..
Cufon
Flash не требуется, Cufon это отличная альтернатива sIFR, и ее довольно просто реализовать. Сначала вы используете генератор Cufon для генерации и настройки нужного шрифта, затем вставляете JavaScript-код Cufon в свой исходный код и сообщаете сценарию, какие селекторы вы хотите настроить для шрифтов..
Самой большой проблемой с Cufon будет юридическая проблема использования этих пользовательских шрифтов онлайн. Поскольку он встроен в Javascript, его может легко скопировать любой, кто просматривает исходный код. Пользовательские шрифты Cufon не выбираются, это другое отключение.
Facelift
Также известен как Замена изображения Facelift (FLIR), это еще один отличный метод для SIFR, который не требует Flash. Похоже, совсем другая альтернатива - это проблема с Flash в sIFR..
Facelift использует PHP и PHP GD Library. Они наследуют унаследованную проблему замены пользовательских шрифтов - не могут выделить текст. Кроме того, мы думаем, что это тоже здорово.
Больше методов
Методы, описанные выше, могут быть более широко использованы, но мы заметили и другие способы преобразования текста в красивые пользовательские шрифты..
Тип Выбрать
TypeSelect использует свойства typeface.js, jQuery, canvas, toDataURL, CSS background и реальный наложенный текст для создания настраиваемой гарнитуры на вашем сайте. Выделение текста работает в Firefox, Safari и даже Chrome, но не в IE.
Замена изображения SWF (swfIR)
swfIR дает вам возможность применить ассортимент визуальных эффектов к любому или всем изображениям на вашем сайте. Например, вы можете добавить любые изображения на свой веб-сайт, а swfIR добавит границу круга, повернет расположение или даже добавит тени к нему..
Девять методов для замены изображения CSS
Это не динамические замены текста, но Крис Койер демонстрирует целых девять различных методов CSS для замены текста изображениями; каждый с табелем с перечислением условий: что делать, если изображения включены / выключены, CSS включен / выключен.
Font Burner
Font Burner использовать Scalable Inman Flash Replacement (sIFR), чтобы изменить заголовки на собственный шрифт. Все, что вам нужно сделать, это найти шрифт, выбрать его и вставить код в заголовок, и ваш заголовок будет изменен в кратчайшие сроки..
WordPress + динамическая замена изображений
Если вы являетесь пользователем WordPress и ищете решение для динамической замены изображений для заголовка или даже для содержимого вашего блога, есть вероятность, что для них есть плагин. Вот некоторые плагины для замены текста, о которых мы узнаем.
плагин sIFR WordPress - WP sIFRWP SIFR был создан, чтобы устранить сложности с получением пользовательских шрифтов на сайте WordPress. С WP sIFR вам нужно всего лишь загрузить файл SWF-шрифта в каталог плагинов, а затем войти в систему, активировать его и настроить его стили на панели «Настройки»..
Cufon WordPress плагин - WP-CufonЕдинственное, что вам нужно сделать, - это преобразовать ваши шрифтовые файлы и загрузить их в каталог плагинов. Вы можете включить объекты, которые вы хотите заменить в меню администратора WordPress..
Facelift Image Replacment (FLIR) плагин для WordpressFLIR для WordPress оптимизирован для SEO и отображает изображение в браузере, только если включен JavaScript. Ваш HTML / XHTML-код остается неизменным, оставляя ваши заголовки, читаемые поисковыми системами, а страницу - читателями, не имеющими JavaScript.
Панель управления Font Burner Font Burner Плагин панели управления позволяет легко добавить любой из 1000+ бесплатных шрифтов, доступных на веб-сайте Font Burner, в вашу тему WordPress..
