Динамічна заміна практичних методів та інструментів

Коли справа доходить до веб-дизайну, творчість дизайну не повинна стримуватися обмеженим вибором підтримуваних веб-шрифтів, які ми називаємо веб-безпечні шрифти. Дизайнери повинні мати свободу використовувати будь-які шрифти, які вони віддають перевагу на заголовки та вміст.

У 2005 році динамічна заміна зображень стала популярною завдяки техніці Масштабована заміна Inman Flash (sIFR). Розроблено Шон Інман, sIFR використовує Javascript та Adobe Flash, щоб дозволити веб-дизайнерам використовувати будь-які користувацькі шрифти, яким вони подобаються на веб-сайті, і як і раніше зберігати видимість для тих, хто не має цього шрифту. І оскільки мережа продовжує розвиватися, сьогодні ми маємо більше альтернативних рішень, використовуючи різні технології, на всякий випадок, якщо ви не дуже любите Flash.

Без подальших труднощів, давайте подивимося на деякі з техніки для досягнення динамічної заміни зображень.

Зазвичай використовуються методи

Ось деякі з найчастіше використовуваних методів заміни динамічних зображень.

Масштабована заміна Inman Flash (sIFR)

sIFR є одним з найпопулярніших способів вбудовувати власні шрифти на веб-сайти. Він використовує Javascript і Flash для створення користувацького накреслення для вашого веб-сайту і дозволяє перетворювати шрифт для вибору. Крім того, перетворений шрифт залишається текстом у вихідних кодах, так що пошукова система все ще може сканувати їх.

sIFR 2 (рекомендовано) - це поточний стабільний реліз, однак, якщо ви плануєте впровадити sIFR, вам також слід знати це siFR 3 Також можна завантажити бета-версію. Це може бути трохи глючить, але принаймні вирішує проблему розширення шрифтів sIFR 2.

Інструменти для sIFR, які можуть бути корисними:

sIFRultsIFRvault є сховищем шрифтів sIFR, які можна завантажити.
Генератор sIFRІнструмент онлайн, який дозволяє створювати файли sifr .swf за допомогою декількох клацань миші. Просто завантажте шрифт TTF шрифту, який потрібно конвертувати, перегляньте та завантажте.
Перетворення шрифтів на sIFRЗавантажте шрифт .TTF, і на цьому веб-сайті вони перетворяться у файл sIFR Flash.

sIFR Lite

Оригінальний sIFR - 22k, отже Дейв вирішили переробити його, використовуючи більш об'єктно-орієнтований підхід, і результат? 3x менше на 3.7k.

Заміна динамічного тексту 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

Не потрібний спалах, Cufon є чудовою альтернативою для sIFR, і його досить просто реалізувати. По-перше, ви використовуєте генератор Cufon для створення та налаштування потрібного шрифту, після чого вставте Cufon Javascript у вихідний код, і ви розповісте скрипт, який селектор ви хочете, щоб шрифти були налаштовані.

Найбільшою проблемою з Cufon буде правова проблема використання цих користувацьких шрифтів в Інтернеті. Оскільки вона вбудована в Javascript, її можна легко розірвати всіма, хто переглядає вихідний код. Користувальницькі шрифти Cufon не можна вибирати.

Підтяжка обличчя

Також відомий як Заміна зображення на обличчя (FLIR), це ще один чудовий метод для sIFR, який не вимагає Flash. Схоже, ще одна альтернатива потрапляє у флеш проблему sIFR.

Facelift використовує PHP і PHP бібліотеку GD. Вони успадковують успадковану проблему заміни користувацьких шрифтів - неможливо вибрати текст. Окрім цього, ми думаємо, що це теж чудово.

Інші методи

Методи, описані вище, можуть бути більш широко використовуваними, але ми помітили деякі інші способи, щоб перетворити текст на красиві користувацькі шрифти.

Тип Виберіть

TypeSelect використовує властивості typeface.js, jQuery, canvas, toDataURL, CSS та реальний накладений текст, щоб надати користувальницький шрифт на вашому сайті. Вибір тексту працює в Firefox, Safari і навіть Chrome, але не IE.

Заміна зображення Swf (swfIR)

swfIR надає можливість застосовувати асортимент візуальних ефектів до будь-якого або всіх зображень на вашому веб-сайті. Наприклад, ви можете додати будь-які зображення на свій веб-сайт, а swfIR додасть кордон, повернути позицію або навіть додати до неї тіні..

Дев'ять методів заміни зображень CSS

Це не динамічні заміни тексту, але Кріс Койєр демонструє дев'ять різних методів CSS для заміни тексту зображеннями; кожен з обліковим записом з переліком умов - що, якщо зображення вмикаються / вимикаються, CSS вмикається / вимикається.

Записувач шрифтів

Записувач шрифтів Використовуйте Scalable Inman Flash Replacement (sIFR), щоб змінити назви на власний шрифт. Все, що вам потрібно зробити, це знайти шрифт, вибрати його і вставити код в голову, і ваш заголовок буде змінено в найкоротші терміни.

Заміна WordPress + Динамічне зображення

Якщо ви користувач WordPress шукає рішення для динамічної заміни зображення за назвою або навіть вмістом вашого блогу, швидше за все, є плагін для них. Ось деякі плагіни для заміни тексту, про які ми дізналися.

sIFR Плагін WordPress - WP sIFRWP sIFR створено для усунення ускладнень з отримання користувацьких шрифтів на сайті WordPress. Завдяки WIF sIFR потрібно лише завантажити файл шрифтів SWF у каталог плагінів, а потім увійти, активувати та налаштувати його стилі на панелі "Налаштування".

Плагін Cufon WordPress - WP-CufonЄдине, що вам потрібно зробити, це перетворення шрифтів і завантаження їх у каталог плагінів. Ви можете ввімкнути об'єкти, які потрібно замінити, в меню адміністратора WordPress.

Заміна реконструкції зображення (FLIR) плагін WordpressFLIR для WordPress є SEO дружнім і тільки відображає зображення в браузері, якщо JavaScript включений. Код HTML / XHTML залишається незмінним, залишаючи теги для читання пошуковими системами, а сторінки читаються користувачами без JavaScript.

Панель керування шрифтом шрифтуThe Записувач шрифтів Плагін панелі керування дозволяє легко додавати будь-який з 1000+ безкоштовних шрифтів, доступних на веб-сайті Font Burner, до теми WordPress..