Δυναμικές Τεχνικές Αντικατάστασης Εικόνας και Εργαλεία

Όταν πρόκειται για το σχεδιασμό ιστοσελίδων, η δημιουργικότητα του σχεδιασμού δεν θα πρέπει να συγκρατείται από τις περιορισμένες επιλογές υποστηριζόμενων γραμματοσειρών του διαδικτύου που καλούμε ασφαλείς γραμματοσειρές. Οι σχεδιαστές πρέπει να έχουν την ελευθερία να χρησιμοποιούν οποιαδήποτε γραμματοσειρά που προτιμούν στους τίτλους και το περιεχόμενο.

Το 2005, η δυναμική αντικατάσταση της εικόνας έγινε δημοφιλής με μια τεχνική που ονομάζεται Βελτιωμένη αντικατάσταση φλας Inman (sIFR). Αναπτύχθηκε από Shaun Inman, Το sIFR εκμεταλλεύεται το Javascript και το Adobe Flash για να επιτρέψει στους σχεδιαστές ιστοσελίδων να χρησιμοποιούν οποιαδήποτε προσαρμοσμένη γραμματοσειρά που τους αρέσουν στον ιστότοπο και εξακολουθούν να διατηρούν την προβολή σε όσους δεν έχουν αυτή τη γραμματοσειρά. Και καθώς ο ιστός συνεχίζει να εξελίσσεται, σήμερα έχουμε περισσότερες εναλλακτικές λύσεις χρησιμοποιώντας διάφορες τεχνολογίες, μόνο σε περίπτωση που δεν είστε αρκετά οπαδός του Flash.

Χωρίς άλλο λάθος, ας ρίξουμε μια ματιά σε μερικά από τα τεχνικές για την επίτευξη δυναμικών αντικατάστασης εικόνας.

Συνήθως χρησιμοποιούμενες τεχνικές

Εδώ είναι μερικές από τις πιο συχνά χρησιμοποιούμενες τεχνικές για δυναμικές αντικαταστάσεις εικόνας.

Βελτιωμένη αντικατάσταση φλας Inman (sIFR)

sIFR είναι μια από τις πιο δημοφιλείς μέθοδοι για την ενσωμάτωση προσαρμοσμένων γραμματοσειρών σε ιστότοπους. Χρησιμοποιεί το Javascript και το Flash για να δημιουργήσει προσαρμοσμένο τυπογραφικό κείμενο για τον ιστότοπό σας και επιτρέπει την επιλογή γραμματοσειράς που έχει μετατραπεί. Εκτός από αυτό, η μετατρεπόμενη γραμματοσειρά παραμένει ως κείμενο σε πηγαίους κώδικες, ώστε η μηχανή αναζήτησης να μπορεί να τις ανιχνεύσει.

sIFR 2 (συνιστάται) είναι η τρέχουσα σταθερή έκδοση, ωστόσο εάν εξετάζετε την εφαρμογή του sIFR, πρέπει επίσης να το ξέρετε siFR 3 beta είναι επίσης διαθέσιμο για λήψη. Μπορεί να είναι λίγο buggy, αλλά τουλάχιστον λύνει το πρόβλημα επέκτασης γραμματοσειράς του sIFR 2.

Εργαλεία για το sIFR που μπορεί να έρθουν χρήσιμα:

• sIFRvaultΤο sIFRvault είναι ένα αποθετήριο των γραμματοσειρών sIFR που μπορείτε να κάνετε λήψη.
• sIFR GeneratorΗλεκτρονικό εργαλείο που σας επιτρέπει να δημιουργείτε αρχεία .swf sIFR με μερικά κλικ του ποντικιού σας. Απλά μεταφορτώστε τη γραμματοσειρά TTF της γραμματοσειράς που θέλετε να μετατρέψετε, προεπισκόπηση και λήψη.
• Μετατρέψτε τις γραμματοσειρές σε sIFRΜεταφορτώστε μια γραμματοσειρά .TTF και αυτός ο ιστότοπος θα τα μετατρέψει σε αρχείο sIFR Flash.

sIFR Lite

Το αρχικό sIFR είναι 22k, έτσι Ντέιβ αποφάσισε να το επεξεργαστεί χρησιμοποιώντας μια πιο αντικειμενοστρεφή προσέγγιση και το αποτέλεσμα; 3 φορές μικρότερη στα 3,7k.

Αντικατάσταση δυναμικού κειμένου PHP + CSS (P + C DTR)

Όπως υποδηλώνει το όνομα, αυτή είναι μια μέθοδος αντικατάστασης κειμένου που χρησιμοποιεί PHP και CSS που κάνουν χρήση της αρχικής μεθόδου που περιγράφεται από Ο Steward Rosenberger. Είναι επίσης μια βελτίωση από την προηγούμενη έκδοση που αναπτύχθηκε από R. Marie Cox που δεν υποστηρίζει περιτύλιξη κειμένου και εσωτερικές ετικέτες. Ένα άλλο δροσερό πράγμα για το P + C DTR είναι ότι το κείμενο της εικόνας μπορεί να προσαρμοστεί με ετικέτες CSS.

typeface.js

Τι κάνει typeface.js το ειδικό είναι ότι χρησιμοποιούν μόνο Javascript για να ενσωματώσουν προσαρμοσμένες γραμματοσειρές και στυλ μπορούν να προσαρμοστούν περαιτέρω με HTML και CSS, δεν απαιτείται Flash. Είναι open source και υποστηρίζει τα περισσότερα προγράμματα περιήγησης που χρησιμοποιούμε αυτές τις μέρες, είτε είναι Safari, Firefox, IE (6 και άνω).

Προσωπικά, μετά από μερικά πειράματα με το typeface.js, πιστεύουμε ότι θα μπορούσε να υπάρξει κάποιο πιθανό περιθώριο βελτίωσης. Πρώτον, οι γραμματοσειρές τείνουν να εμφανίζονται ελαφρώς διαφορετικές μεταξύ των διαφορετικών προγραμμάτων περιήγησης. Εάν χρησιμοποιείτε το typeface.js, σας συνιστούμε να κάνετε έναν έλεγχο μεταξύ των περιηγητών πριν υποθέσετε ότι αυτό που βλέπετε στον Firefox θα είναι αυτό που βλέπετε στο Safari. Το κείμενο δεν είναι επίσης επιλέξιμο με typeface.js.

Οι προσαρμοσμένες γραμματοσειρές στο typeface.js δεν έχουν συνταχθεί. που σημαίνει ότι οι χρήστες έχουν τη δυνατότητα να κατεβάσουν τις γραμματοσειρές. Αυτό θα μπορούσε να οδηγήσει σε πρόβλημα πνευματικών δικαιωμάτων. Σας συνιστούμε να ελέγξετε προσεκτικά ώστε να βεβαιωθείτε ότι οι γραμματοσειρές που χρησιμοποιείτε είναι εντάξει για αναδιανομή.

Cufon

Δεν απαιτείται φλας, Cufon είναι μια μεγάλη εναλλακτική λύση για το sIFR και είναι πολύ απλή στην εφαρμογή. Κατ 'αρχάς, χρησιμοποιείτε τη γεννήτρια Cufon για να δημιουργήσετε και να προσαρμόσετε τη γραμματοσειρά που θέλετε, τότε εισάγετε το Cufon Javascript στον πηγαίο κώδικα σας και πείτε στο σενάριο ποιοι επιλογείς θέλετε οι γραμματοσειρές να προσαρμοστούν.

Το μεγαλύτερο πρόβλημα με την Cufon θα ήταν το νομικό ζήτημα της χρήσης αυτών των γραμματοσειρών σε απευθείας σύνδεση. Δεδομένου ότι είναι ενσωματωμένο στο Javascript, μπορεί εύκολα να αντιγραφεί από οποιονδήποτε βλέπει τον πηγαίο κώδικα. Οι γραμματοσειρές Cufon δεν είναι επιλέξιμες, αυτή είναι η άλλη απενεργοποίηση.

Facelift

Γνωστός και ως Αντικατάσταση εικόνας Facelift (FLIR), είναι μια άλλη μεγάλη μέθοδος για sIFR που δεν χρειάζονται Flash. Φαίνεται ότι πολύ άλλη εναλλακτική λύση είναι το χτύπημα στο θέμα Flash του sIFR.

Το Facelift χρησιμοποιεί τη βιβλιοθήκη GD της PHP και της PHP. Κληρονομούν το πρόβλημα παλαιού τύπου αντικατάστασης γραμματοσειράς - δεν είναι δυνατή η επιλογή του κειμένου. Εκτός από αυτό, πιστεύουμε ότι είναι και πολύ μεγάλη.

Περισσότερες μέθοδοι

Οι παραπάνω τεχνικές μπορούν να χρησιμοποιηθούν ευρύτερα, αλλά έχουμε παρατηρήσει κάποιους άλλους τρόπους για να δώσουμε τη μετατροπή του κειμένου σας σε όμορφα προσαρμοσμένα γραμματοσειρά.

Τύπος Επιλέξτε

TypeSelect αξιοποιεί τις ιδιότητες φόντου typefaces.js, jQuery, καμβά, toDataURL, CSS και πραγματικό κείμενο επικάλυψης για να δώσετε ένα προσαρμοσμένο τυπογραφικό κείμενο στον ιστότοπό σας. Η επιλογή κειμένου λειτουργεί σε Firefox, Safari ή ακόμα και στο Chrome, αλλά όχι στο IE.

Αντικατάσταση εικόνας Swf (swfIR)

swfIR σας δίνει τη δυνατότητα να εφαρμόσετε μια ποικιλία οπτικών εφέ σε οποιαδήποτε ή όλες τις εικόνες στον ιστότοπό σας. Για παράδειγμα, μπορείτε να προσθέσετε οποιεσδήποτε εικόνες στον ιστότοπό σας και το swfIR θα προσθέσει ένα περιθωριακό περιθώριο, θα περιστρέψει τη θέση ή ακόμα θα προσθέσει σκιές σε αυτό.

Εννέα τεχνικές αντικατάστασης εικόνας CSS

Αυτές δεν είναι δυναμικές αντικαταστάσεις κειμένων, αλλά Chris Coyier επιδεικνύει όσο και εννέα διαφορετικές τεχνικές CSS για την αντικατάσταση κειμένου με εικόνες. καθένα με μια κάρτα αναφοράς που αναφέρει την κατάσταση του - τι γίνεται αν οι εικόνες είναι ενεργοποιημένες / απενεργοποιημένες, το CSS είναι ενεργοποιημένο / απενεργοποιημένο.

Γραμματοσειρά

Γραμματοσειρά μοχλός για την Αντικατάσταση Flash Scalable Inman (sIFR) για να αλλάξετε τους τίτλους σας σε προσαρμοσμένη γραμματοσειρά. Το μόνο που χρειάζεται να κάνετε είναι να βρείτε τη γραμματοσειρά, να την επιλέξετε και να εισαγάγετε τον κώδικα στο κεφάλι και ο τίτλος σας θα αλλάξει σε ελάχιστο χρόνο.

WordPress + αντικατάσταση δυναμικής εικόνας

Εάν είστε χρήστης του WordPress που αναζητά λύση δυναμικής αντικατάστασης εικόνας για τον τίτλο ή ακόμα και το περιεχόμενο του ιστολογίου σας, υπάρχουν πιθανότητες να υπάρχει plugin για αυτούς. Ακολουθούν μερικά plugins αντικατάστασης κειμένου που γνωρίζουμε.

sIFR Plugin WordPress - WP sIFRWP sIFR δημιουργήθηκε για να καταργήσει τις επιπλοκές από τη λήψη προσαρμοσμένων γραμματοσειρών σε έναν ιστότοπο του WordPress. Με το WIF sIFR, πρέπει μόνο να φορτώσετε το αρχείο γραμματοσειράς SWF στον κατάλογο plugin και στη συνέχεια να συνδεθείτε, να το ενεργοποιήσετε και να διαμορφώσετε τα στυλ του όλα στον πίνακα "Ρυθμίσεις".

Cufon WordPress Plugin - WP-CufonΤο μόνο που πρέπει να κάνετε είναι να μετατρέψετε τα αρχεία fontfiles και να τα ανεβάσετε στον κατάλογο plugins. Μπορείτε να ενεργοποιήσετε τα αντικείμενα που θέλετε να αντικατασταθούν από το μενού διαχειριστή του WordPress.

Ανανέωση εικόνας Facelift (FLIR) Wordpress PluginFLIR για το WordPress είναι φιλικό προς το SEO και κάνει μόνο την εικόνα στο πρόγραμμα περιήγησης αν είναι ενεργοποιημένη η JavaScript. Ο κώδικας HTML / XHTML παραμένει αμετάβλητος αφήνοντας τις ετικέτες κεφαλής σας ευανάγνωστες από τις μηχανές αναζήτησης και τη σελίδα που διαβάζεται από εκείνους χωρίς JavaScript.

Πίνακας ελέγχου καυστήρα γραμματοσειρώνο Γραμματοσειρά Το plugin του Πίνακα Ελέγχου σας επιτρέπει να προσθέσετε εύκολα οποιαδήποτε από τις δωρεάν 1000+ γραμματοσειρές που είναι διαθέσιμες στην ιστοσελίδα του Burner Font στο θέμα WordPress.