Οι γραμματοσειρές σας στο CSS. Μη τυποποιημένη γραμματοσειρά με CSS. Δυσκολίες χρήσης ενσωματωμένων γραμματοσειρών

Το πρώτο μέρος του κεφαλαίου είναι αφιερωμένο στην γνωριμία με τις γραμματοσειρές CSS. Σε αυτή τη σελίδα, θα μάθετε πώς να συνδέετε τις γραμματοσειρές στο CSS, τι είναι γραμματοσειρές ιστού και πώς να συνεργαστείτε μαζί τους, ποιες μορφές γραμματοσειρών είναι πώς να χρησιμοποιήσετε τις γραμματοσειρές Google. Για να ξεκινήσετε, σκεφτείτε ένα εύκολο παράδειγμα σύνδεσης της γραμματοσειράς CSS:

P (Γραμματοσειρά: Verdana;)

Αυτό το μικρό κομμάτι κώδικα σημαίνει ότι σε όλες τις ετικέτες

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

Σε μια στιγμή, οι σχεδιαστές έπρεπε να καθορίσουν επιπλέον διάφορες ανταλλακτικές γραμματοσειρές σε περίπτωση που ο υπολογιστής του χρήστη θα λείπει. Ας υποθέσουμε ότι θέλετε να εκδώσετε ένα κείμενο με τη γραμματοσειρά Verdana και να εγκαταστήσετε το Trebucchet MS, τη γραμματοσειρές της Γενεύης και οποιαδήποτε γραμματοσειρά χωρίς Serifs. Αυτό γίνεται με αυτόν τον τρόπο:

P (Γραμματοσειρά: Verdana, "Trebuchet MS", Γενεύη, Sans-Serif;)

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

Εμφανίστηκε αυτή η γραμματοσειρά. Εάν λείπει η γραμματοσειρά, το πρόγραμμα περιήγησης θα ελέγξει την παρουσία των παρακάτω στη λίστα της γραμματοσειράς - trebuchet ms. Εάν λείπει αυτή η γραμματοσειρά, θα ελεγχθεί η ακόλουθη γραμματοσειρά - Γενεύη. Εάν δεν υπάρχει Γενεύη στον υπολογιστή του χρήστη, το πρόγραμμα περιήγησης θα επιλέξει μια άλλη διαθέσιμη γραμματοσειρά χωρίς Serifs και θα εμφανίσει το κείμενο.

Σημείωση: Στον κώδικα καταγράφηκε το όνομα γραμματοσειράς Trebuchet MS σε εισαγωγικά. Πρέπει να πάρετε το όνομα της γραμματοσειράς σε διπλά ή απλά αποσπάσματα όταν υπάρχουν κενά.

Σχετικά με τι είναι μια γραμματοσειρά με Serif (Serif) και χωρίς (Sans-Serif), μπορείτε να διαβάσετε στη σελίδα Wikipedia.

Web γραμματοσειρές

Η παραπάνω μέθοδος χρήσης γραμματοσειρών έχει ένα τεράστιο μείον - είστε περιορισμένοι στην ποσότητα γραμματοσειρών. Θα πρέπει να είστε ικανοποιημένοι με μόνο αυτά των επιλογών τους που είναι πιθανότατα εγκατεστημένες στους περισσότερους υπολογιστές.

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

Έτσι, για να εμφανίσετε την επιθυμητή γραμματοσειρά στο πρόγραμμα περιήγησης του χρήστη, χρειαζόμαστε αυτή τη γραμματοσειρά για να φορτώσετε στον υπολογιστή του. Είναι πολύ απλό να το εφαρμόσετε. Αυτή η μέθοδος σύνδεσης γραμματοσειρών σε CSS ανοίγει πραγματικά πολλές ευκαιρίες πριν από τους σχεδιαστές. Αλλά αξίζει να σημειωθεί για μια κουταλιά στο βαρέλι του μελιού: πρώτον, όχι κάθε πρόγραμμα περιήγησης υποστηρίζει μια συγκεκριμένη μορφή γραμματοσειράς (η οποία θα προκαλέσει ότι η γραμματοσειρά δεν εμφανίζεται) και, δεύτερον, αν το αρχείο με γραμματοσειρά έχει μεγάλο βάρος, Μπορεί να επιβραδύνει τη σελίδα λήψης.

Μορφή υποστήριξης

Πώς να αντιμετωπίσετε το πρόβλημα της αποτυχίας της μορφής αρχείου; Ας ρίξουμε μια ματιά στο τραπέζι όπου εμφανίζονται οι πιο δημοφιλείς μορφές γραμματοσειρών και ανακαλύψτε ποια προγράμματα περιήγησης υποστηρίζονται από:

Σημείωση: Μπορείτε πάντα να μάθετε τις τοπικές πληροφορίες σχετικά με τη στήριξη των μορφών γραμματοσειρών στο Caniuse.com. Στη συμβολοσειρά αναζήτησης, πρέπει να εισαγάγετε το όνομα της μορφής (για παράδειγμα, TTF).

Εάν είστε προσανατολισμένοι με σύγχρονα προγράμματα περιήγησης, θα χρησιμοποιήσετε μόνο τη μορφή γραμματοσειράς TTF - τα πιο κοινά και τα χρησιμοποιημένα. Στην περίπτωση που πρέπει να έχετε πολλές μορφές μιας γραμματοσειράς, μπορείτε να χρησιμοποιήσετε ειδικούς ηλεκτρονικούς μετατροπείς από τη μία μορφή στην άλλη και στη συνέχεια να συνδέσετε όλα τα αρχεία με τη σειρά τους. Έτσι, το πρόγραμμα περιήγησης θα είναι σε θέση να επιλέξει τη μορφή γραμματοσειράς με την οποία λειτουργεί.

Συνδέουμε μια γραμματοσειρά web με @ font-face

Ας υποθέσουμε ότι έχετε τη δική σας μοναδική γραμματοσειρά που ονομάζεται Myuniquefont σε μορφή TTF και θέλετε το βασικό κείμενο της ιστοσελίδας να εμφανίζεται από αυτή τη γραμματοσειρά. Το πρώτο πράγμα που πρέπει να γίνει είναι να αντιγράψετε το αρχείο γραμματοσειράς στον φάκελο όπου βρίσκονται όλα τα άλλα αρχεία ιστοτόπου. Για να μην δημιουργήσετε ένα χάος, μπορείτε να δημιουργήσετε ένα ξεχωριστό φάκελο ειδικά για γραμματοσειρές, καλέστε το, για παράδειγμα, γραμματοσειρές.

@ Font-Face (Font-Face: Myuniquefont, SRC: URL ("Γραμματοσειρές / Myuniquefont.ttf");).

Η ιδιότητα της οικογένειας γραμματοσειράς σε αυτή την περίπτωση παίζει έναν άλλο ρόλο: Με αυτό, αναθέτουμε το όνομα στη γραμματοσειρά, στη συνέχεια να χρησιμοποιήσετε αυτό το όνομα κατά τη σύνταξη στυλ:

P (Γραμματοσειρά: Myuniquefont;)

Η δεύτερη γραμμή υποδεικνύει τη διαδρομή προς το αρχείο γραμματοσειράς. Στο παράδειγμα μας, το αρχείο είναι myuniquefont.ttf βρίσκεται στο φάκελο γραμματοσειρών. Έχετε μια διεύθυνση URL μπορεί να διαφέρει.

Γραμματοσειρές Google γραμματοσειρές.

Η Google καθιστά δυνατή την εύκολη σύνδεση κάθε γραμματοσειράς από τη συλλογή γραμματοσειρών Google. Το μόνο που χρειάζεται να κάνετε για να αρχίσετε να χρησιμοποιείτε τη γραμματοσειρά που σας αρέσει, - Καθορίστε πολλές ρυθμίσεις στη σελίδα γραμματοσειράς στο Google, μετά την οποία αντιγράφετε τον ειδικό σύνδεσμο σε αυτή τη γραμματοσειρά και προσθέστε στο έγγραφο Web.

Σημείωση: Η όλη συλλογή γραμματοσειρών από την Google διατίθεται στον ιστότοπο Γραμματοσειρές Google. . Η σελίδα Μπορείτε να χρησιμοποιήσετε διάφορα φίλτρα για να αναζητήσετε γραμματοσειρές ανά κατηγορία, πάχος, αλφάβητο.

Παρακάτω περιγράφουμε κάθε σύνδεση γραμματοσειράς βήμα από το Google. Για να καταλάβετε τι μιλάμε, επιλέξτε οποιαδήποτε γραμματοσειρά από τη σελίδα της Google Fonts και ανοίξτε το κάνοντας κλικ στο κουμπί Γρήγορη χρήση.

Βήμα 1: Επιλέξτε Νοημοσύνη

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

Βήμα 2: Επιλέξτε αλφάβητο

Στη συνέχεια, στη σελίδα υπάρχει η ευκαιρία να επιλέξετε ένα σύνολο χαρακτήρων: Latina, Cyrillic, κλπ., Ανάλογα με τη γραμματοσειρά, δεν μπορούν να υπάρχουν όλες οι παραλλαγές αλφάβητου. Παρόμοια με το προηγούμενο στοιχείο, είναι καλύτερο να τοποθετήσετε ένα tick μόνο απέναντι από το αλφάβητο που θα χρειαστεί.

Βήμα 3: Προσθήκη κώδικα στην τοποθεσία

Ο πρώτος τρόπος συνεπάγεται την προσθήκη ενός συνδέσμου στο διακομιστή Google στον κώδικα HTML, από όπου η γραμματοσειράς μεταφορτώνεται. Πρέπει να αντιγράψετε το έτοιμο κομμάτι κώδικα και να το τοποθετήσετε ανάμεσα στις ετικέτες. Στο έγγραφο HTML. Παράδειγμα:

...

Ο δεύτερος τρόπος είναι να συνδεθείτε τη γραμματοσειρά χρησιμοποιώντας την οδηγία @Import. Ο τελικός κωδικός βρίσκεται στη δεύτερη καρτέλα της παραγράφου 3 στη σελίδα της επιλεγμένης γραμματοσειράς Google. Πρέπει να προστεθεί στην αρχή του φύλλου στυλ σας (διαφορετικά το αρχείο δεν εισάγεται). Ο κώδικας μοιάζει με αυτό:

@ import URL (http://fonts.googleapis.com/cs?family\u003droboto&subset\u003dlatin.cyillic);

Η ιδιαιτερότητα της πρώτης μεθόδου είναι ότι θα χρειαστεί να προσθέσετε έναν σύνδεσμο στη γραμματοσειρά στον τίτλο κάθε σελίδας, όπου σχεδιάζεται να χρησιμοποιηθεί. Είναι εύκολο να εφαρμοστεί σε ιστότοπους με μικρό αριθμό σελίδων, αλλά προβληματική για μεγάλους πόρους. Η δεύτερη μέθοδος είναι βολική επειδή ο κώδικας μπορεί να τοποθετηθεί στην αρχή του εξωτερικού φύλλου στυλ και στη συνέχεια όλες οι σελίδες στις οποίες συνδέεται αυτός ο πίνακας θα λάβει την επιθυμητή γραμματοσειρά, η οποία θα φορτωθεί χρησιμοποιώντας την οδηγία @Import.

Βήμα 4: Δημιουργία στυλ

Μετά την εφαρμογή προηγούμενων βημάτων, μπορείτε να αρχίσετε να εφαρμόζετε τη γραμματοσειρά. Καθώς ο κανόνας του CSS είναι γραμμένος, έχετε ήδη δει προηγουμένως:

P (Γραμματοσειρά: "Roboto", Sans-Serif;)

Εάν στο πρώτο βήμα επιλέξατε διάφορες επιλογές σχεδίασης (για παράδειγμα, προστέθηκε η έντονη έντονη έκδοση 700, στη συνέχεια στο τρίτο βήμα ο κώδικας θα τροποποιηθεί ελαφρώς:

@ import URL (http://fonts.googleapis.com/css?family\u003droboto: 700.400 & υποσύνολο \u003d latin.cylillic);

Για να δώσετε στη συνέχεια τη γραμματοσειρά λίπους, γράψτε το CSS-Style με αυτόν τον τρόπο:

P (FONT-Face: "Roboto", Sans-Serif, Γραμματοσειρά: 700;)

Σημείωση: Στη γραμματοσειρές Google, μόνο οι συμβατικές μονάδες από 100 έως 900 χρησιμοποιούνται μόνο για τον καθορισμό του κορεσμού γραμματοσειράς. Έτσι, ο κανονικός σχεδιασμός (προεπιλογή) ισοδυναμεί με την τιμή 400 (κανονική) και το πρότυπο τολμηρό είναι ισοδύναμο με 700 (έντονους χαρακτήρες).

Τα κύρια πλεονεκτήματα της υπηρεσίας γραμματοσειρών Google είναι:

• Ευκολία χρήσης (ακόμη και ο νεοφερμένος θα είναι σε θέση να ασχοληθεί με την υπηρεσία και ο απαραίτητος κωδικός δημιουργείται αυτόματα - παραμένει μόνο η αντιγραφή του).
• Διαθεσιμότητα γραμματοσειρών (δεν υπάρχει ανάγκη να πληρώσουν).
• Όλες οι χρησιμοποιημένες μορφές γραμματοσειράς παρέχονται (αυτό σημαίνει ότι κάθε πρόγραμμα περιήγησης θα μπορεί να μεταφορτώσει ακριβώς τη μορφή γραμματοσειράς με την οποία λειτουργεί).

Μεταξύ των ελλείψεων της υπηρεσίας δεν είναι μια πολύ μεγάλη ποικιλία γραμματοσειρών, ειδικά κυριλλικών. Με την ευκαιρία, υπάρχουν και άλλες παρόμοιες υπηρεσίες στο Διαδίκτυο, για παράδειγμα, πληρώνονται (πληρωμένα).

ΑΠΟΤΕΛΕΣΜΑΤΑ

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

Έχετε έναν ιδιότροπο πελάτη, που απαιτώντας "ζωγραφισμένες" γραμματοσειρές; Ή μπορείτε απλά να δημιουργήσετε ένα κομψό θεματικό χώρο και το προσαρμοσμένο κείμενο γραφής θα τονίσει την ιδέα του συγγραφέα σας; Εξετάστε έναν από τους τρόπους επίλυσης αυτού του προβλήματος.

Όταν είναι απαραίτητο

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

• Κομψό μενού.
• Κομψά πρωτοσέλιδα.
• Λογότυπο. Η δημιουργία ενός λογότυπου είναι ένα σοβαρό πράγμα, πολλά βιβλία με αυτή την ευκαιρία είναι γραμμένες, οι μακρινοί ειδικοί εκπαιδεύονται σε αυτή την περίπτωση ... και ο συγγραφέας δεν θα πάρει το ψωμί τους στους ανθρώπους, αλλά να εισάγει τα πέντε kopecks τους. Εάν το λογότυπό σας είναι το κείμενο, για το σκοπό της βελτιστοποίησης υψηλής ποιότητας SEO, το ακολουθεί ως κείμενο.

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

Λύσεις λύσεων

Όπως και στις περισσότερες περιπτώσεις, κάθε εργασία έχει αρκετές λύσεις και καμία εξαίρεση μας. Πηγαίνω:

• Εικόνα. Δεν υπάρχει ευελιξία διαμόρφωσης, η ταχύτητα φόρτωσης σελίδας επιδεινώνεται, το φορτίο στο διακομιστή αυξάνεται, το SEO δεν είναι καθόλου σε περιπτώσεις.
• Λάμψη. Πρόσθετα αρχεία για λήψη, χρειάζονται δεξιότητες εργασίας σε φλας-πάρτι (οι παραμέτρους κειμένου είναι επίσης εδώ εδώ), μέσος όρος SEO.
• JS. Πρόσθετα εξωτερικά αρχεία (και όλα αυτά που ακολουθούν από αυτήν), το μέσο όρο SEO, το κείμενο δεν μπορεί να αντιγραφεί.
• Μη τυποποιημένα γραμματοσειρά σημαίνει CSS

True Path Samurai, ή "Long Live CSS"

Κατά την επίλυση της εργασίας, θα βοηθήσουμε τον κανόνα CSS @ Font-Face, το οποίο σας επιτρέπει να φορτώσετε συγκεκριμένες γραμματοσειρές στο έγγραφο και να καθορίσετε τις ρυθμίσεις τους.

@ FONT-Face (Γραμματοσειρά - Οικογένεια: Alexbrush-κανονικό; SRC: Τοπικό ("AlexBrush-κανονικό"), URL ("./lexbrush-regular. OTF");).

Έτσι, αποκλείουμε την ανάγκη για την επιλεγμένη γραμματοσειρά στην περιοχή του επισκέπτη.

Ο σχεδιασμός αυτού του τύπου σάς επιτρέπει να συνδέσετε γραμματοσειρές TrueType (TTF) και OpenType (OTF).

Ενδιαφέρων: Το OpenType έχει μεγάλο σε σύγκριση με τις προ-δοκιμαστικές δυνατότητες TrueType και υποστηρίζει ένα μεγαλύτερο σύνολο χαρακτήρων με μικρότερο μέγεθος αρχείου.

Φαίνεται ότι αυτό το θέμα θα μπορούσε να κλείσει σε αυτό το θέμα, αλλά υπάρχει ένα πράγμα ... Να θυμάστε τους "ειδικούς" φίλους μας, δηλαδή τα προγράμματα περιήγησης της οικογένειας δηλ. Για να εφαρμόσετε μια μη τυποποιημένη γραμματοσειρά στο IE, η γραμματοσειρά πρέπει να είναι σε ενσωματωμένη μορφή Opentype (EOT).

Αυτό δεν είναι μόνο μία μόνο περίπτωση όταν ωφελεί περισσότερο όφελος από τη βλάβη. Το γεγονός είναι ότι η μορφή EOT συνεπάγεται:

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

Λαμβάνοντας υπόψη τα παραπάνω, τροποποιούμε το παράδειγμά μας:

@ FONT-Face (Γραμματοσειρά - Οικογένεια: Alexbrush-κανονικό, SRC: Τοπικό ("AlexBrush-κανονικό"), URL (./lexbrush- κανονική. Eot);) @ γραμματοσειρά- πρόσωπο (γραμματοσειρά- οικογένεια: alexbrush-κανονικό; src : τοπική ("alexbrush-κανονική"), διεύθυνση URL ("/lexbrush-regular. OTF ");).

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

@ Font-Face (Γραμματοσειρά - Οικογένεια: "AlexBrush-κανονικό"; SRC: URL ("AlexBrush-Regional.eot"). SRC: URL ( "Alexbrush-κανονικό.eot; #IFIX") Μορφή ("ενσωματωμένος opentype"), URL ( "AlexBrush-κανονική.svg # newnicalregular") Μορφή ("SVG"). URL ("AlexBrush-κανονική.woff") μορφή ("WOFF"), URL ("AlexBrush-κανονική.Otf") μορφή ("TrueType"),)

Σπουδαίος!!!

1. Ευκαμψία. Η ρύθμιση και η αλλαγή των παραμέτρων κειμένου δεν είναι δύσκολη.
2. Ταχύτητα. Ο ελάχιστος αριθμός πρόσθετων αρχείων για λήψη δεν επιβραδύνει τη σελίδα ως τον ίδιο αριθμό αντικειμένων σε JS και Flash.
3. SEO.. Το κείμενο παρέμεινε το κείμενο - οι επαγγελματίες είναι προφανείς.
4. Ένα παράδειγμα λειτουργεί σε προγράμματα περιήγησης από: IE4, OP, FX3.5, CR2, SA1.
5. Πριν από την εφαρμογή της γραμματοσειράς, πρέπει να το βελτιστοποιήσετε (διαβάστε το afterword).
6. Όταν χρησιμοποιείτε γραμματοσειρές που αγοράσατε, πρέπει να ανησυχείτε για την ασφάλειά τους.
7. Εάν το εύρος ζώνης του καναλιού επικοινωνίας είναι μικρό, τότε το αρχείο γραμματοσειράς δεν θα φορτωθεί, ο χρήστης είτε βλέπει μια απλή γραμματοσειρά στον τόπο μη προτύπου ή δεν θα δει τίποτα κατ 'αρχήν.

Afterword.

Βελτιστοποίηση γραμματοσειράς

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

Ως αποτέλεσμα τέτοιων προσπαθειών, τα αρχεία γραμματοσειράς μπορούν να μεταφράσουν δεκάδες MB. Χρειαζόμαστε μια τέτοια ποικιλία; Εξάλλου, για να δώσουμε μια σκιά πικάντικη στιλ, εμείς (ανάλογα με την κατάσταση) δεν χρειάζονται απαραίτητα σημεία στίξης, μια ποικιλία χαρακτήρων. Στην πραγματικότητα, δεν χρειάζονται πάντα διαφορετικά σχέδια. Ή επιτρέψτε σας να βελτιστοποιήσετε τον ιστότοπό σας αυστηρά κάτω από το runet, μπορείτε να κάνετε χωρίς λατινικά ...

Λοιπόν, έχετε ήδη πιάσει την ουσία. Η γραμματοσειρά πρέπει να βελτιστοποιηθεί:

• Αφαιρούμε όλο το περιεχόμενο που δεν είναι χρήσιμο στην επίλυση ενός πρακτικού έργου.
• Μετατρέψτε τα αρχεία στις απαραίτητες μορφές.

Πως να το κάνεις? Στο Διαδίκτυο, υπάρχουν πολλές υπηρεσίες που σας επιτρέπουν να εκτελέσετε τις απαραίτητες λειτουργίες, για παράδειγμα: Γεννήτρια Font-Face, Online Font Converter, Web Font Optimizer, κλπ.

ΠΡΟΣΤΑΣΙΑ

Χρειάζεται πολύς χρόνος για να αναπτύξετε μια λειτουργική γραμματοσειρά υψηλής ποιότητας, και επομένως αυτή η γραμματοσειρά αξίζει ένα καλό χρηματικό ποσό. Όλα τα αγορασμένα (νομικά) γραμματοσειρά είναι εγγεγραμμένα και αντιπροσωπεύουν πνευματική και βιομηχανική ιδιοκτησία.

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

Στο IE, όλα σας πιστεύουν - η προστασία στη μορφή EOT είναι ήδη κατασκευασμένη. Για όλους τους άλλους παρατηρητές της αδιαμφισβήτητης λύσης.

Υπάρχουν, φυσικά, νέες εξελίξεις - για παράδειγμα, μια μορφή WOFT, στην οποία το ζήτημα της προστασίας αφαιρείται παρόμοια με το EOT, αλλά δυστυχώς, δεν διαθέτει πλήρη υποστήριξη στα προγράμματα περιήγησης.

Μπορείτε επίσης να εφαρμόσετε απλά δωρεάν γραμματοσειρές.

Αυτοί οι χρόνοι έχουν περάσει από καιρό όταν η επιλογή των γραμματοσειρών για το σχεδιασμό ιστοσελίδων περιορίστηκε στο πρότυπο, το λεγόμενο "Safe" Set. Αποτελούσε μόνο εννέα γραμματοσειρές, δηλαδή το Arial, Arial Black, Comic Sans, Courier New, Georgia, Impact, Times New Roman, Trebucched MS και Verdana. Με την ανάπτυξη της γλώσσας της σήμανσης του υπερκειμένου και τα τραπέζια στυλ Cascading που χρησιμοποιούνται για να σχεδιάσουν την εμφάνιση ιστοσελίδων, είναι δυνατόν να χρησιμοποιηθούν σχεδόν οποιεσδήποτε γραμματοσειρές στο σχεδιασμό του χώρου, ανεξάρτητα από το αν αυτές οι γραμματοσειρές είναι εγκατεστημένες στον υπολογιστή του χρήστη ή όχι.

Για να χρησιμοποιήσετε στον ιστότοπό σας κάποια αρχική γραμματοσειρά που πρέπει να έχετε μια ίδια γραμματοσειρά, να το φέρετε σε ορισμένες μορφές και να συνδεθείτε με τον ιστότοπο. Εξετάστε το πώς μπορεί να γίνει.

Πώς να συνδέσετε τη γραμματοσειρά στον ιστότοπο
Η σύνδεση μη τυποποιημένων γραμματοσειρών στον ιστότοπο μπορεί να πραγματοποιηθεί τουλάχιστον δύο τρόπους:

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

Εξετάστε και τις δύο μεθόδους σε απλουστευμένα παραδείγματα.

Γρήγορη σύνδεση γραμματοσειράς στον ιστότοπο χρησιμοποιώντας ειδικές υπηρεσίες
Υπάρχουν διάφορες υπηρεσίες που αποθηκεύουν διάφορες ενδιαφέρουσες γραμματοσειρές και παρέχουν την ικανότητα να τις χρησιμοποιούν σε διάφορους ιστότοπους. Μια τέτοια υπηρεσία είναι η γραμματοσειρά Google. Στη βάση της, η σύνδεση γραμματοσειράς εκτελείται ως εξής.
Μια άλλη παρόμοια υπηρεσία είναι η ιστοσελίδα WebFont.ru. Η σύνδεση των γραμματοσειρών της είναι σε μεγάλο βαθμό παρόμοια με το παραπάνω παράδειγμα.
Ανεξάρτητα από άλλες υπηρεσίες που συνδέουν τις γραμματοσειρές
Προκειμένου να μην εξαρτηθεί από τις υπηρεσίες τρίτων, συνιστάται να αποθηκεύετε και να συνδέσετε γραμματοσειρές σε ένα πρότυπο απευθείας στη φιλοξενία ή το διακομιστή σας. Είναι κάπως πιο περίπλοκο, αλλά όχι τόσο πολύ ώστε αυτό το καθήκον να είναι ανέφικτο.

1. Φορτώστε στο αρχείο του υπολογιστή σας με μια γραμματοσειρά. Οι περισσότερες συχνά γραμματοσειρές παρέχονται για τη λήψη σε μορφή TTF. - Γραμματοσειρά TrueType, που αναπτύχθηκε από την Apple και υποστηρίζεται από πολλά σύγχρονα λειτουργικά συστήματα.
   
2. Για να εξασφαλιστεί η διασταύρωση, δηλ. Συμβατότητα και ταυτόσημη οθόνη γραμματοσειράς σε διάφορα προγράμματα περιήγησης ιστού, πρέπει να συνδέσετε τη γραμματοσειρά στον ιστότοπο στις ακόλουθες μορφές: tTF., ΕΟΤ., woff., svg.. Μπορείτε να μετατρέψετε το αρχείο προέλευσης με τη γραμματοσειρά σε όλες τις απαραίτητες μορφές χρησιμοποιώντας διαδικτυακές υπηρεσίες, όπως: ,.
   Πρέπει να σημειωθεί ότι όλες οι συγκεκριμένες υπηρεσίες σε ένα βαθμό ή ένα άλλο κομμάτι στρεβλώνουν τις γραμματοσειρές κατά τη μετατροπή. Πολύ καλύτερα με αυτή την εργασία να αγωνιστεί ένα ειδικό βοηθητικό πρόγραμμα που ονομάζεται Fontprep.. Αλλά προορίζεται μόνο για το λειτουργικό σύστημα Mac OS.
   
3. Αφού λάβετε όλες τις μορφές, πρέπει να συνδεθείτε με τη θέση γραμματοσειράς, να δημιουργήσετε ένα ξεχωριστό φάκελο στο πρότυπο. γραμματοσειρές.στην οποία αντιγράφετε τα ληφθέντα αρχεία.
   
4. Σύνδεση της γραμματοσειράς στον ιστότοπο χρησιμοποιεί τον κανόνα @ Font-Face με τον ακόλουθο τρόπο.

5. Το απλούστερο και ευχάριστο μέρος παραμένει - ο σκοπός της μη τυποποιημένης γραμματοσειράς σε οποιοδήποτε στοιχείο του σχεδιασμού. Για παράδειγμα, ολόκληρη η σελίδα όπως στο ακόλουθο παράδειγμα.

   Σώμα (
   Γραμματοσειρά: "Alsstory"?
   Μέγεθος γραμματοσειράς: 12px
   ) Στην παράμετρο της οικογένειας γραμματοσειράς, πρέπει να καθορίσετε το όνομα της γραμματοσειράς σύμφωνα με την παρόμοια τιμή του κανόνα @ Font-Face.
   

Η θεωρούμενη μέθοδος θα σας επιτρέψει να συνδέσετε μη τυποποιημένες γραμματοσειρές που δεν είναι σε εξειδικευμένες υπηρεσίες.

Στο συμπέρασμα του άρθρου θα ήθελα να συστήσω να μην εμπλακείτε στο διακοσμημένο site και να μην εγκαταστήσετε πολλές μη τυποποιημένες γραμματοσειρές σε αυτό. Θυμηθείτε ότι κάθε νέα plug-ins θα οδηγήσει σε αύξηση του μεγέθους κάθε σελίδας τοποθεσίας και επιδείνωση της ταχύτητας λήψης για τους χρήστες.

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

Λοιπόν, έβαλα ένα πείραμα τον εαυτό μου και ήταν πιο δύσκολο να πηδήσω, αποφάσισα να κάνω μια "εργαστηριακή σημείωση" για να δημοσιοποιηθεί και να το δημοσιεύσει σε ένα εγκαταλελειμμένο blog.

Ο παλιός σχεδιασμός δεν ταιριάζει με τη νέα ιδέαΚαι εγώ, όχι μακρά σκέψη, πήρε περισσότερο ή λιγότερο όπως από το γενικό αποθετήριο WordPress.

Ξέρετε ποιο είναι το πρόβλημα ορισμένων προετοιμασμένων προτύπων από εκεί; Το πρόβλημα είναι στη συμβατότητα των μενωργία με τις κυριλλικές γραμματοσειρές. Στην περίπτωσή μου, οι τίτλοι υπέστησαν. Δεδομένου ότι η γραμματοσειρά που αναφέρεται από το CSS δεν περιέχει ρωσικούς χαρακτήρες, ελήφθησαν από την προεπιλεγμένη γραμματοσειρά (ή Sans ή Arial). Ως αποτέλεσμα, οι τίτλοι ήταν τεράστιες και χαλάσισαν όλη την άποψη. Έπρεπε να σκεφτώ Πώς να αντικαταστήσετε τη γραμματοσειρά.

Υπάρχουν διάφοροι τρόποι να το κάνετε αυτό.

Μέθοδος 1: χαζός

Έρχεται στο γεγονός ότι βρίσκετε την κατάλληλη γραμματοσειρά στο δίκτυο, εγκαταστήστε το στον υπολογιστή, συνταγογραφήστε το CSS και δείτε τον ιστότοπό σας όπως προοριζόταν.

Τα υπόλοιπα συνεχίζουν να το βλέπουν καλύτερα με προεπιλεγμένες γραμματοσειρές και στο χειρότερο επίσης αναστρέψιμο.

Μην το κάνεις!

Μέθοδος 2: Μετασχίνουμε το σχεδιασμό υπό τυπική γραμματοσειρά

Αυτή είναι η πιο τέλεια επιλογή.Αλλά, δυστυχώς, δεν είναι πάντα κατάλληλο, επειδή μερικές φορές το "highlight" του σχεδίου χάνεται εξαιτίας του. Παρ 'όλα αυτά, θεωρείτε πάντα αυτή την προσέγγιση, διότι, ανεξάρτητα από το πόσο σκληρά προσπαθείτε, μπορεί να αποδειχθεί ότι ο υπολογιστής-πελάτης θα εξακολουθεί να χρησιμοποιεί τη γραμματοσειρά από αυτά που είναι διαθέσιμα.

Ασφαλείς γραμματοσειρές που είναι σχεδόν όλα τα λειτουργικά συστήματα, αυτό είναι: Verdana (Ιδανικό για κείμενα), Επίπτωση. (μερικές φορές πολύ καλά στους τίτλους), Arial, Arial Black, Comic Sans MS (Kaka, που αγαπούν οι νεοελληνές), Το courier νέο. (Κατάλληλο για παραδείγματα κώδικα και φόρμες), Γεωργία, Times New Roman, Trebuchet MS.

Μέθοδος 3: Εικόνα αντί για κείμενο

Η επιλογή είναι πολύ crossbrest και κατάλληλη για διακόσμηση στατικά στοιχεία. Για παράδειγμα - καλύμματα ιστοτόπων. Κάντε ένα διαφανές PNG με κείμενο με την επιθυμητή γραμματοσειρά, επεξεργαστείτε όπως χρειάζεστε και εισάγετε στην τοποθεσία, χωρίς να ξεχάσετε να γεμίσετε την Alt. Ή το ίδιο, αλλά το κείμενο που κολλάμε σε κάποιο υπόβαθρο και εξοικονομούμε σε JPG.

Εγώ, εκτός από την κεφαλίδα, ήταν απαραίτητο να αλλάξετε την εμφάνιση των μηνυμάτων και των widgets. Λοιπόν, να μην κάνετε για κάθε είσοδο μια ξεχωριστή εικόνα με τον τίτλο;

Παρόλο που υπάρχουν τεχνίτες που εξέρχονται εικόνες με κεφαλίδες κειμένου χρησιμοποιώντας σενάρια διακομιστή, αλλά αυτό είναι ήδη μια διαστροφή.

Μέθοδος 4: Cufon

Αυτά τα aplofts μπορούν να δημιουργηθούν από το αρχείο γραμματοσειράς χρησιμοποιώντας μια online γεννήτρια http://cufon.shoquolate.com/generate/

Ο ευκολότερος τρόπος να επωφεληθείτε http://www.google.com/fonts. Επιλέξτε την επιθυμητή γραμματοσειρά από την παρουσίαση και λάβετε τον έτοιμο κώδικα που χρειάζεστε για να εισάγετε στην τοποθεσία (στο κεφάλι και στο αρχείο στυλ), μετά από το οποίο λειτουργεί όλα.

Αλλά δεν ήθελα να χρησιμοποιήσω το επιπλέον javascript, να ενοχλεί τη δημιουργία μικρών, κλπ. Ήθελα να κάνω τα πάντα γρήγορα και εύκολα. Επιπλέον, το αρχείο με την επιθυμητή γραμματοσειρά είναι διαθέσιμη από καιρό.

Μέθοδος 4: Συνδέστε τη γραμματοσειρά στην τοποθεσία χρησιμοποιώντας το CSS

Στο Διαδίκτυο, γεμάτο εγχειρίδια σε αυτό το θέμα. Ωστόσο, ξεφλουδίζοντας τα τακούνια από αυτά, ήρθα σε ένα λυπηρότερο αποτέλεσμα. Η γραμματοσειρά TTF εμφανίζεται κανονικά μόνο στο IE. Στα υπόλοιπα προγράμματα περιήγησης, αντικαταστάθηκε ανελέητα από το Arial.

Ομολογώ, δεν είμαι οπαδός του IE και το θεωρώ ένα πρόγραμμα περιήγησης για να κατεβάσετε τα προγράμματα περιήγησης. ΟΧΙ πια! Έτσι, έπρεπε να κάνω μια μικρή βελτίωση.

Για να συνδέσετε μια γραμματοσειρά στον ιστότοπο με το CSS, θα χρειαστούμε μια ίδια γραμματοσειρά (αρχείο) και ένας ηλεκτρονικός μετατροπέας http://onlinefontconomter.com/

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

1. Ελάτε στη θέση του μετατροπέα Έχετε αρκετή γραμματοσειρά και σύρετε εδώ σε ένα τέτοιο παράθυρο (είναι συνήθως στη δεξιά στήλη).

2. Κατεβάστε τη γραμματοσειρά Σε 4 εκδόσεις: EOT, OTF, TTF και Woff. Αυτό πρέπει να είναι αρκετό. Το πρόγραμμα περιήγησης, στη διαδικασία απόδοσης της σελίδας, θα επιλέξει και θα λήξει αυτό που είναι πιο βολικό.

3. Ρυθμίστε τις γραμματοσειρές στην ιστοσελίδα. Δημιούργησα γι 'αυτό στη ρίζα του φακέλου ιστότοπου F " Και τα δημοσίευσε εκεί.

Ενημέρωση 02/16/2015: Αυτή τη στιγμή onlinefontconverter.com. Ήταν επανασχεδιασμένο και καμία από τις προτεινόμενες γραμματοσειρές δεν μετατράπηκε (((

Έπρεπε να χρησιμοποιήσω το site font2web.com. Αυτό δίνει όλες τις απαραίτητες γραμματοσειρές αμέσως πακέτο σε ένα αρχείο. Βολικά!

4. Συνδέστε τη γραμματοσειρά στον ιστότοπο. Για να το κάνετε αυτό, στο αρχείο CSS ή στις κατάλληλες ετικέτες στυλ, πληκτρολογήστε αυτόν τον κωδικό.

@ Font-Face (Font-Focing: Etomoifont, SRC: URL (/f/myfont1.eot), URL (/f/myfont1.otf), URL (/f/myfont1.ttf), URL (/ f / myfont1. Woff);)

Γραμματοσειρά: Etomoifont. - Λέει στο πρόγραμμα περιήγησης για το πώς να ονομάζεται μια φορτωμένη γραμματοσειρά. Το όνομα θα έρθει με τον εαυτό σας.

sRC: URL (/f/myfont1.eot), διεύθυνση URL (/f/myfont1.otf), διεύθυνση URL (/f/myfont1.ttf), διεύθυνση URL (/f/myfont1.woff); - Καθορίζει τη διαδρομή και τα ονόματα των αρχείων γραμματοσειρών.

Γιατί οι γραμματοσειρές έρχονται σε αυτή τη σειρά;

Πρώτα Έβαλα ΕΟΤ.. Αυτή η μορφή χρησιμοποιεί παλιά έκδοση IE.

Δεύτερος — Otf.. Αυτή είναι μια συμπιεσμένη μορφή γραμματοσειρών, η οποία, θεωρητικά, ζυγίζει λιγότερα.

Τρίτος — TTF.. Είναι κατανοητό σχεδόν όλα τα προγράμματα περιήγησης. Αν και συμβαίνει με διαφορετικούς τρόπους. Για παράδειγμα, ενδέχεται να μην ανοίξει στην Ίο.

τελευταίος — Woff.. Θα πρέπει να διαβάσει καλά στις Μακρές, αλλά δεν υπήρχε χρόνος να ελέγξουμε ακόμα.

5. Δηλώστε στο αρχείο στυλ ποια οικογένεια των τίτλων εξόδου γραμματοσειρών (στις προτεραιότητες των περιπτώσεων μας Η2.).

h2 (Font-Family: Etomoifont;)

Ετοιμος!

Εάν οι γραμματοσειρές δεν έχουν εφαρμοστεί, βεβαιωθείτε ότι: Πρώτον, στο γεγονός ότι το αρχείο CSS χρησιμοποιείται από τον ιστότοπο (μερικές φορές πρέπει να επαναφέρετε την προσωρινή μνήμη, μερικές φορές αναζητήστε ένα άλλο αρχείο CSS), δεύτερον, που χρησιμοποιούν τη γραμματοσειρά για το Κατηγορία που καθορίζετε (αναγνωριστικό ή ετικέτα) που δεν εμποδίζεται σε άλλο αρχείο CSS που φορτώνεται μετά από αυτό.

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

Αυτό συνέβη.

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

Οπότε μην είστε τεμπέλης και ελέγξτε Τι θα μοιάζει ο ιστότοπός σας εάν τα φορτωμένα γραμματοσειρά είναι απενεργοποιημένα. Προσπαθήστε να παίξετε με ασφαλή από Μόδα 2., και στη συνέχεια να εκκινήσετε ξανά. Εάν οι διαστάσεις περισσότερο ή λιγότερο συμπίπτουν και δεν πήγαιναν, αυτό σημαίνει ότι είναι εντολή.

Και επιπλέον! Μέθοδοι δοκιμών μόνο σε υπολογιστές, όπου η γραμματοσειρά με την οποία πρόκειται να λειτουργήσει δεν έχει εγκατασταθεί. Διαφορετικά αποδεικνύεται Αριθμός μεθόδου 1..

Αυτό είναι όλο. Μαζί σας ήταν.
Σε νέες συναντήσεις.

Κάθε σχεδιαστής ιστοσελίδων ονειρεύεται να δημιουργήσει μια τοποθεσία με μια όμορφη τυπογραφία. Αλλά, δυστυχώς, τα προγράμματα περιήγησης υποστηρίζουν μόνο μερικά ακουστικά, λεγόμενα "ασφαλή για web" γραμματοσειρές. Το πρότυπο σύνολο περιλαμβάνει τις ακόλουθες γραμματοσειρές: Αρραβωνιαστικός, Verdana., Φορές, Γεωργία., Κούριερ νέα. Και αρκετούς άλλους.

Ακουστικά Καθορίζει ένα σύνολο μιας ή περισσοτέρων γραμματοσειρών, καθένα από τα οποία αποτελείται από σύμβολα που έχουν κοινές δομές - βάρος, στυλ, σχεδιασμό, σχέδιο, πυκνότητα, μέγεθος, για παράδειγμα, γραμματοσειρές χωρίς πάνινα παπούτσια (ή grotescas), γραμματοσειρές με serifs (antiqua). Το ακουστικό αποτελείται από ένα σύνολο σημείων (αριθμοί, γράμματα, σημεία στίξης, οι ειδικοί χαρακτήρες μπορούν επίσης να αποτελούνται από μη αλφαβητικούς χαρακτήρες).
Γραμματοσειρά - Πρόκειται για ένα σύνολο συγκεκριμένων μεγεθών, χαρακτήρων βάρους και στυλ. Για παράδειγμα, οι χρόνοι γραμματοσειράς νέας ρωμαϊκής στιλ Το πλάσμα 16px είναι μια γραμματοσειρά και φορές το νέο ρωμαϊκό ιταλικό στυλ μεγέθους 10px είναι ήδη άλλο.

Κανόνας @ font-face Σας επιτρέπει να συνδέσετε μια ποικιλία γραμματοσειρών χρήστη. Το πρόγραμμα περιήγησης φορτώνει τις γραμματοσειρές στην κρυφή μνήμη και τις χρησιμοποιεί για να κάνει κείμενο στη σελίδα. Αυτή η προσέγγιση καλείται Ενσωμάτωση γραμματοσειρών, και ενσωματωμένες γραμματοσειρές - web γραμματοσειρές.

Ο κανόνας @ Font-Face πρέπει να τοποθετηθεί μπροστά από όλους τους άλλους κανόνες CSS, καθώς αυτή η λήψη θα βελτιώσει την απόδοση της σελίδας. Οι γραμματοσειρές που μπορείτε να κάνετε λήψη μπορούν να τοποθετηθούν σε ένα ειδικό φάκελο γραμματοσειρών που δημιουργήθηκαν στο διακομιστή.

Για να συνδέσετε τη γραμματοσειρά χρησιμοποιώντας τον κανόνα @ Font-Face, χρειάζεστε:
1) Τοποθετήστε το αρχείο γραμματοσειράς στο διακομιστή σε διάφορες μορφές για να υποστηρίξετε όλα τα προγράμματα περιήγησης,
2) Καθορίστε το όνομα της γραμματοσειράς, καταχωρίστε τη σύνδεση στο αρχείο και ρυθμίστε την περιγραφή της γραμματοσειράς,
3) Προσθέστε το όνομα γραμματοσειράς στην ιδιοκτησία της οικογένειας γραμματοσειράς του στοιχείου που θα εμφανιστεί σε αυτή τη γραμματοσειρά.

@ Font-Face (Font-Face: "WebFont"; SRC: URL (webfont.eot;) Μορφή ("EOT"), / * IE8 +, υπογράψτε; Σας επιτρέπει να πάρετε γύρω από το σφάλμα στην τιμή SRC * / URL Επεξεργαστής (webfont.woff) μορφή ("Woff"), / * όλα τα σύγχρονα προγράμματα περιήγησης, IE9 + * / URL ("TrueType"). / * όλα τα σύγχρονα προγράμματα περιήγησης * /) P (FONT-FACE: "WebFont", Arial, Sans -sif;)

Αυτός ο κώδικας λέει στο πρόγραμμα περιήγησης να εμφανίζει κείμενο μέσα στο στοιχείο.

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

Μέσα σε κάθε οικογένεια γραμματοσειράς, μπορείτε να ορίσετε έως τις εννέα λιπώδεις τιμές (βάρος). Επομένως, για κάθε ενσωματωμένη γραμματοσειρά, καθώς και για κάθε σχέδιο, πρέπει να ορίσετε έναν ξεχωριστό κανόνα @ font-πρόσωπο, δηλ. Δεν μπορείτε να δηλώσετε σε έναν κανόνα δύο διαφορετικές γραμματοσειρές ή μια γραμματοσειρά μιας οικογένειας, αλλά διαφορετικών στυλ και βάρη.

@ Font-face (Font-Family: "WebFont". SRC: URL ("EOT"), URL ("Webfont.woff) μορφή (" Webfont.woff) ("Woff"), μορφή URL ("TrueType"). Γραμματοσειράς - έντονο, στυλ γραμματοσειράς · στιλ γραμματοσειράς: italic;) @ font-face (font-face: "webfont"; src: url (webfont.eot;) μορφή ("EOT"), URL (webfont .woff) Woff "), URL (" TrueType "), Γραμματοσειρά: 400; Στυλ γραμματοσειράς: Κανονική;)

Γενικά, για γραμματοσειρά, μπορείτε να ορίσετε τις ακόλουθες ιδιότητες:

@ Font-Face (Font-Face: "FontName". SRC: Μορφή URL () (""); Παραλλαγή γραμματοσειράς:; Γραμματοσειρά:; Γραμματοσειρά :?)

Εάν υποθέσετε ότι αυτή η γραμματοσειρά είναι εγκατεστημένη στον υπολογιστή του χρήστη και θέλετε τη γραμματοσειρά να φορτώσει μόνο αφού ελέγξει τη διαθεσιμότητά του από τον χρήστη, μπορείτε να χρησιμοποιήσετε την τοπική τιμή () για να καθορίσετε τη διεύθυνση:

@ Font-Face (Font-Face: "WebFont", SRC: Τοπική ("Webfont"), URL (WebFont.eot;) Μορφή ("EOT"), URL (WebFont.Woff), URL (Webfont.ttf) μορφή ("truetope"), γραμματοσειρά γραμματοσειράς: τολμηρό, στυλ γραμματοσειράς: πλάγια)

Φόρμες γραμματοσειράς ιστού

Το ακίνητο @ Font-Face έχει καλή υποστήριξη στα προγράμματα περιήγησης, αλλά διαφορετικά προγράμματα περιήγησης χρησιμοποιούν διαφορετικές μορφές γραμματοσειρών. Υπάρχουν τέσσερις κύριες μορφές γραμματοσειράς:

Μορφή WOFF. (Web Άνοιγμα μορφής γραμματοσειράς), Ανοίξτε τη μορφή δικτύου γραμματοσειράς, σχεδιασμένη στο Mozilla. Η τεχνική Woff δεν μπορεί να ονομαστεί μορφή γραμματοσειράς, καθώς αντιπροσωπεύει μόνο ένα κέλυφος με μια λειτουργία συμπίεσης. Η μορφή συμπιέζει τις γραμματοσειρές σε μορφή TTF / OTF για χρήση στο Internet. Επίσης, η Woff σάς επιτρέπει να προσθέσετε μεταδεδομένα στο αρχείο, για παράδειγμα, πληροφορίες άδειας χρήσης.

OTF / TTF Formats (Γραμματοσειρά Opentyype και γραμματοσειρά TrueType) λειτουργούν στα περισσότερα προγράμματα περιήγησης. Και οι δύο μορφές διανέμονται δωρεάν.

Μορφή eot Ενσωματωμένος ανοιχτός τύπος) που δημιουργείται από τους προγραμματιστές της Microsoft, αντιπροσωπεύει ένα συμπιεσμένο αντίγραφο της γραμματοσειράς TTF, η επαναχρησιμοποίηση της οποίας απαγορεύεται από την τεχνολογία DRM (διαχείριση ψηφιακών δικαιωμάτων, δικαιώματα ψηφιακής πρόσβασης). Υποστηρίζεται μόνο στο IE, ξεκινώντας από την 8η έκδοση.

SVG / SVGZ. Γραφικά διανυσματικών scalabe - τύπος αρχείων γραμματοσειράς που αντιπροσωπεύουν σχέδιο γραμματοσειράς φορέα. Κατά κανόνα, έχει μικρότερα μεγέθη αρχείων, επιτρέποντας έτσι τη βελτίωση της απόδοσης σε κινητές συσκευές. Λειτουργεί στο Opera Mobile και το IOS Safari.

Δυσκολίες χρήσης ενσωματωμένων γραμματοσειρών

1) Τα αρχεία γραμματοσειράς μπορούν να είναι μεγάλα μεγέθη, οπότε σε ορισμένες περιπτώσεις προσθέτοντας @ font-face επιβραδύνει τη φόρτωση σελίδας.
2) Αδειοδοτημένοι περιορισμοί που δεν επιτρέπουν την ελεύθερη χρήση συνδέονται με ορισμένες γραμματοσειρές.
3) Ορισμένες γραμματοσειρές φαίνονται κακή σε ιστοσελίδες.