Χρήση προσαρμοσμένων γραμματοσειρών σε ιστοσελίδες
Το περιεχόμενο κειμένου ήταν πάντα ένα σημαντικό κομμάτι ιστοτόπων, αλλά στις πρώτες μέρες του Διαδικτύου, οι σχεδιαστές και οι προγραμματιστές ήταν πολύ περιορισμένοι στον τυπογραφικό έλεγχο που είχαν πάνω από τις ιστοσελίδες τους. Αυτό περιλάμβανε έναν περιορισμό στις γραμματοσειρές που μπορούσαν να χρησιμοποιήσουν αξιόπιστα στους ιστότοπούς τους. Έχετε ακούσει πιθανώς τον όρο "ασφαλείς γραμματοσειρές" που αναφέρονται στο παρελθόν. Αυτό αναφερόταν στο μικρό σύνολο γραμματοσειρών που ήταν πολύ πιθανό να συμπεριληφθεί στον υπολογιστή ενός ατόμου, πράγμα που σημαίνει ότι εάν τοποθετήσατε μία από αυτές τις γραμματοσειρές, ήταν ένα ασφαλές στοίχημα ότι θα έκανε σωστά στον περιηγητή ενός ατόμου.
Σήμερα, οι επαγγελματίες του διαδικτύου διαθέτουν πλήθος νέων γραμματοσειρών και επιλογών τύπου για να συνεργαστούν, ένα από τα οποία είναι το σχήμα WOFF.
Τι είναι το WOFF;
Το WOFF είναι ένα ακρωνύμιο που σημαίνει "Web Open Font Format." Χρησιμοποιείται για τη συμπίεση γραμματοσειρών για χρήση με την ιδιότητα γραμματοσειράς CSS @ font-face. Είναι ένας τρόπος να ενσωματώσετε τις γραμματοσειρές σε ιστοσελίδες, ώστε να μπορείτε να χρησιμοποιείτε εξειδικευμένες γραμματοσειρές πέρα από τις τυπικές "Arial, Times New Roman, Georgia" - οι οποίες είναι μερικές από τις προαναφερθείσες γραμματοσειρές ασφαλών στον ιστό.
Το WOFF υποβλήθηκε στο W3C ως πρότυπο για τη συσκευασία γραμματοσειρών για ιστοσελίδες. Έγινε σχέδιο εργασίας στις 16 Νοεμβρίου 2010. Σήμερα έχουμε πραγματικά το WOFF 2.0, το οποίο βελτιώνει τη συμπίεση από την πρώτη έκδοση της μορφής κατά σχεδόν 30%. Σε ορισμένες περιπτώσεις, αυτές οι εξοικονομήσεις μπορούν να είναι ακόμα πιο σημαντικές!
Γιατί να χρησιμοποιήσετε το WOFF;
Οι γραμματοσειρές Web, συμπεριλαμβανομένων εκείνων που παρέχονται μέσω της μορφής WOFF, παρέχουν πολλά πλεονεκτήματα σε σχέση με άλλες επιλογές γραμματοσειρών. Όσο χρήσιμες είναι αυτές οι γραμματοσειρές ασφαλείς στο web, και υπάρχει σίγουρα ακόμα μια θέση για αυτές τις γραμματοσειρές στο έργο μας, είναι ωραίο να επεκτείνουμε επίσης τις επιλογές μας και να ανοίξουμε τις τυπογραφικές επιλογές μας.
Οι γραμματοσειρές WOFF έχουν τα ακόλουθα πλεονεκτήματα:
- Είναι πιο προσιτές από τις γραμματοσειρές ως εικόνες. WOFF στυλ απλό κείμενο HTML με CSS, δίνοντάς σας προσβασιμότητα και τον έλεγχο σχεδίασης που δεν επιτρέπουν οι εικόνες.
- Τα αρχεία WOFF περιλαμβάνουν τυπογραφικές πληροφορίες όπως μορφές με βάση τα συμφραζόμενα και παλιές μορφές στυλ. Αυτό δίνει στις ιστοσελίδες σας καλύτερη τυπογραφία επειδή χρησιμοποιείτε τους σωστούς χαρακτήρες και όχι μόνο τις προσεγγίσεις.
- Οι γραμματοσειρές WOFF μπορούν να βοηθήσουν στη διεθνοποίηση, επειδή μπορείτε να ενσωματώσετε γραμματοσειρές με χαρακτήρες από άλλες γλώσσες.
- Όπως όλα τα κείμενα με στυλ CSS, οι γραμματοσειρές με το WOFF είναι πιο φιλικές προς τις μηχανές αναζήτησης. Οι μηχανές αναζήτησης δεν "βλέπουν" το κείμενο που είναι ενσωματωμένο σε μια εικόνα και ενώ το κείμενο ALT μπορεί να βοηθήσει, δεν υπάρχει υποκατάστατο του ίδιου του κειμένου.
- Οι γραμματοσειρές WOFF είναι συμπιεσμένες, επομένως είναι μικρότερες από άλλους τύπους αρχείων γραμματοσειρών. Αυτό θα βοηθήσει με την ταχύτητα λήψης του ιστότοπου και τη συνολική απόδοση.
- Μπορείτε να χρησιμοποιήσετε τα αρχεία WOFF για να διατηρήσετε την ταυτότητα της μάρκας σας ενσωματώνοντας τις εταιρικές σας γραμματοσειρές ως αρχεία WOFF.
WOFF Υποστήριξη προγράμματος περιήγησης
Το WOFF έχει εξαιρετική υποστήριξη προγράμματος περιήγησης σε σύγχρονα προγράμματα περιήγησης, όπως:
- Chrome 6+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 11.1+
- Σαφάρι 5.1+
Υποστηρίζεται ουσιαστικά σε όλες τις εκδόσεις, με μοναδική εξαίρεση όλες τις εκδόσεις του Opera Mini.
Πώς να χρησιμοποιήσετε τις γραμματοσειρές WOFF
Για να χρησιμοποιήσετε ένα αρχείο WOFF, πρέπει να ανεβάσετε ένα αρχείο WOFF στον διακομιστή ιστού σας, να του δώσετε ένα όνομα με την ιδιότητα @ font-face, και στη συνέχεια να καλέσετε τη γραμματοσειρά στο CSS. Για παράδειγμα:
- Μεταφορτώστε τη γραμματοσειρά που ονομάζεται myWoffFont.woff στον κατάλογο / fonts του διακομιστή ιστού.
- Στο αρχείο CSS προσθέστε μια ενότητα @ font-face:
@ font-face {
γραμματοσειρά-οικογένεια: myWoffFont;
src: url ('/ fonts / myWoffFont.woff') μορφή ('woff');
}}
- Προσθέστε το νέο όνομα γραμματοσειράς (myWoffFont) στη στοίβα γραμματοσειρών CSS, όπως θα κάνατε με οποιοδήποτε άλλο όνομα γραμματοσειράς:
Π {
γραμματοσειρά-οικογένεια: myWoffFont , Γενεύη, Arial, Helvetica, sans-serif;
}}
Πού να πάρετε γραμματοσειρές WOFF
Υπάρχουν δύο μεγάλες θέσεις που μπορείτε να βρείτε πολλές γραμματοσειρές WOFF που είναι ελεύθερες για εμπορική και μη εμπορική χρήση:
- Άνοιγμα βιβλιοθήκης γραμματοσειρών
- Σκίουρος γραμματοσειράς
Αν έχετε άδεια χρήσης γραμματοσειράς που δεν είναι διαθέσιμη σε μορφή WOFF, μπορείτε να χρησιμοποιήσετε έναν δημιουργό WOFF όπως στο Font Squirrel για να μετατρέψετε τα αρχεία γραμματοσειράς σας σε αρχεία WOFF. Υπάρχει επίσης ένα εργαλείο γραμμής εντολών που ονομάζεται sfnt2woff που μπορείτε να χρησιμοποιήσετε σε Macintosh και Windows για να μετατρέψετε τις γραμματοσειρές TrueType / OpenType σε WOFF.
Κατεβάστε το δυαδικό κατάλληλο για το σύστημά σας και εκτελέστε το στη γραμμή εντολών (ή το τερματικό) και ακολουθήστε τις οδηγίες.
WOFF Παράδειγμα
Ακολουθούν μερικά παραδείγματα αρχείων WOFF: Σελίδα WOFF σε HTML5 σε 24 ώρες.
Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard στις 7/11/17