Praktyczne techniki i narzędzia do zastępowania obrazów dynamicznych

Jeśli chodzi o projektowanie stron internetowych, kreatywność projektowania nie powinna być ograniczona przez ograniczony wybór obsługiwanych czcionek internetowych, które nazywamy bezpieczne czcionki internetowe. Projektanci powinni mieć swobodę używania dowolnych czcionek w tytułach i treściach.

W 2005 roku dynamiczna wymiana obrazu stała się popularna dzięki technice zwanej Scalable Inman Flash Replacement (sIFR). Opracowany przez Shaun Inman, sIFR korzysta z Javascript i Adobe Flash, aby umożliwić projektantom stron internetowych korzystanie z dowolnych niestandardowych czcionek, które lubią na stronie internetowej, a jednocześnie zachować widoczność dla tych, którzy nie mają tej czcionki. A ponieważ sieć wciąż się rozwija, dziś mamy więcej alternatywnych rozwiązań wykorzystujących różne technologie, na wypadek, gdybyś nie był fanem Flasha.

Bez zbędnych ceregieli, spójrzmy na niektóre z nich techniki uzyskiwania dynamicznych zamienników obrazu.

Powszechnie używane techniki

Oto niektóre z najczęściej stosowanych technik dynamicznej wymiany obrazów.

Scalable Inman Flash Replacement (sIFR)

sIFR to jedna z najpopularniejszych metod osadzania niestandardowych czcionek na stronach internetowych. Wykorzystuje Javascript i Flash do generowania niestandardowego kroju pisma dla Twojej witryny i pozwala na wybór przekonwertowanego kroju pisma. Poza tym przekonwertowany krój pisma pozostaje jako tekst w kodach źródłowych, więc wyszukiwarka nadal może je indeksować.

sIFR 2 (zalecane) to bieżąca stabilna wersja, jednak jeśli szukasz implementacji sIFR, powinieneś o tym wiedzieć siFR 3 wersja beta jest również dostępna do pobrania. Może to być trochę buggy, ale przynajmniej rozwiązuje problem rozszerzenia czcionki sIFR 2.

Narzędzia do sIFR, które mogą się przydać:

sIFRvaultsIFRvault to repozytorium czcionek sIFR, które można pobrać.
Generator sIFRNarzędzie online, które pozwala tworzyć pliki sIFR .swf za pomocą kilku kliknięć myszą. Wystarczy przesłać czcionkę TTF czcionki, którą chcesz przekonwertować, wyświetlić podgląd i pobrać.
Konwertuj czcionki na sIFRZaładuj czcionkę .TTF, a ta strona będzie je konwertować na plik Flash sIFR.

sIFR Lite

Oryginalny sIFR to 22k, więc Dave zdecydował się go przerobić, stosując podejście bardziej zorientowane obiektowo, a wynik? 3x mniejsze przy 3,7k.

PHP + CSS Dynamic Text Replacement (P + C DTR)

Jak sama nazwa wskazuje, jest to metoda zastępowania tekstu wykorzystująca PHP i CSS, które wykorzystują oryginalną metodę opisaną przez Steward Rosenberger. Jest to również ulepszenie poprzedniej wersji opracowanej przez R. Marie Cox który nie obsługuje zawijania tekstu i tagów wewnętrznych. Kolejną fajną rzeczą związaną z P + C DTR jest możliwość dostosowania tekstu obrazu za pomocą tagów CSS.

typeface.js

Co sprawia, że typeface.js wyjątkowe jest to, że używają tylko Javascript, aby osadzić niestandardowe czcionki, a styl można dodatkowo dostosować za pomocą HTML i CSS, nie jest wymagany Flash. Jest to open source i obsługuje większość przeglądarek, z których korzystamy obecnie, niezależnie od tego, czy jest to Safari, Firefox, IE (6 i wyżej).

Osobiście po kilku eksperymentach z typeface.js uważamy, że może istnieć potencjalne miejsce na ulepszenia. Po pierwsze, czcionki wydają się nieco różnić między różnymi przeglądarkami. Jeśli korzystasz z pliku typeface.js, zalecamy sprawdzenie przed przeglądarką przed założeniem, że to, co widzisz w Firefoksie, będzie tym, co zobaczysz w Safari. Tekstów nie można również wybrać za pomocą typeface.js.

Własne czcionki w typeface.js nie są kompilowane; co oznacza, że użytkownicy mogą pobierać czcionki. Może to prowadzić do problemów z prawami autorskimi. Zaleca się, aby dokładnie sprawdzić, czy używane czcionki są w porządku do redystrybucji.

Cufon

Nie wymaga lampy błyskowej, Cufon to świetna alternatywa dla sIFR i jest dość prosta do wdrożenia. Najpierw używasz generatora Cufon do generowania i dostosowywania czcionki, którą chcesz, a następnie wstawiasz kod Cufon Javascript do kodu źródłowego i powiadamiasz skrypt, które selektory chcesz, aby czcionki były dostosowywane.

Największym problemem z Cufonem byłby problem prawny używania tych niestandardowych czcionek w Internecie. Ponieważ jest osadzony w JavaScript, może być łatwo zgrany przez każdego, kto ogląda kod źródłowy. Nie można wybrać niestandardowych czcionek Cufon, to drugie wyłącza się.

Modernizacja

Znany również jako Wymiana obrazu facelift (FLIR), to kolejna świetna metoda na sIFR, która nie wymaga Flasha. Wygląda na to, że bardzo inna alternatywa polega na problemie Flasha sIFR.

Facelift wykorzystuje bibliotekę PHP i PHP GD. Dziedziczą oni problem ze starszymi niestandardowymi zamiennikami czcionek - nie można wybrać tekstu. Poza tym uważamy, że też jest świetny.

Więcej metod

Powyższe techniki mogą być szerzej stosowane, ale zauważyliśmy też kilka innych sposobów na przekształcenie tekstu w piękne niestandardowe kroje pisma.

Wpisz Wybierz

Wpisz Wybierz wykorzystuje właściwości typeface.js, jQuery, canvas, toDataURL, CSS i rzeczywisty nakładany tekst, aby nadać niestandardowy krój pisma na Twojej stronie. Wybór tekstu działa w Firefox, Safari, a nawet w Chrome, ale nie w IE.

Swf Image Replacement (swfIR)

swfIR daje możliwość zastosowania zestawu efektów wizualnych do dowolnego lub wszystkich obrazów na swojej stronie internetowej. Na przykład, możesz dodać dowolne obrazy na swojej stronie, a swfIR doda zaokrągloną granicę, obróci pozycjonowanie lub nawet doda do niej cienie.

Dziewięć technik wymiany obrazu CSS

To nie są dynamiczne zamienniki tekstu, ale Chris Coyier demonstruje aż dziewięć różnych technik CSS, aby zastąpić tekst obrazami; każdy z kartą raportu z listą warunków - co jeśli obrazy są włączone / wyłączone, CSS jest włączony / wyłączony.

Nagrywanie czcionek

Nagrywanie czcionek skorzystaj z opcji Skalowalna wymiana Flash Inman (sIFR), aby zmienić swoje tytuły na niestandardową czcionkę. Wszystko, co musisz zrobić, to znaleźć czcionkę, wybrać ją i wstawić kod do głowy, a tytuł zostanie szybko zmieniony.

WordPress + Wymiana obrazu dynamicznego

Jeśli jesteś użytkownikiem WordPress szukającym rozwiązania do dynamicznego zastępowania obrazów tytułem, a nawet treścią bloga, są szanse, że są dla nich wtyczki. Oto kilka wtyczek zastępujących tekst, o których wiemy.

sIFR WordPress Plugin - WP sIFRWP sIFR został stworzony, aby usunąć komplikacje z pobierania niestandardowych czcionek w witrynie WordPress. W WP sIFR wystarczy przesłać plik z czcionkami SWF do katalogu wtyczek, a następnie zalogować się, aktywować i skonfigurować wszystkie style w panelu Ustawienia.

Wtyczka Cufon WordPress - WP-CufonJedyne, co musisz zrobić, to przekonwertować pliki czcionek i przesłać je do katalogu wtyczek. Możesz włączyć obiekty, które chcesz zastąpić, w menu administratora programu WordPress.

Facelift Image Replacment (FLIR) Wtyczka WordpressFLIR dla WordPress jest przyjazny dla SEO i renderuje obraz tylko w przeglądarce, jeśli włączony jest JavaScript. Twój kod HTML / XHTML pozostaje niezmieniony, pozostawiając tagi nagłówków czytelne dla wyszukiwarek, a strony czytelne dla osób bez JavaScript..

Panel sterowania nagrywarką czcionekThe Nagrywanie czcionek Wtyczka Panelu sterowania umożliwia łatwe dodawanie do motywu WordPress dowolnej z ponad 1000 darmowych czcionek dostępnych w witrynie Font Burner.