Μη τυπικές γραμματοσειρές στο Blogger για σχεδιασμό ιστολογίου. Όμορφη καλλιγραφική γραμματοσειρά στο Blogspot, Blogger

Καλημέρα, αγαπητοί αναγνώστες. Σήμερα θέλω να μιλήσω για έναν από τους τρόπους εγκατάστασης μιας μη τυπικής κυριλλικής γραμματοσειράς στον ιστότοπό σας. Αυτή η μέθοδοςκατάλληλο για οποιονδήποτε ιστότοπο, συμπεριλαμβανομένων ιστολογίων στο Blogger. Αυτή η μέθοδος έχει χρησιμοποιηθεί με επιτυχία σε πολλούς αγγλόφωνους ιστότοπους και χρησιμοποιείται ενεργά σε premium θέματα WordPress και Joomla.

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

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

Σας έχω ιντριγκάρει αρκετά; Ήρθε η ώρα να προχωρήσουμε στις λεπτομέρειες.

Έτσι, αυτή η μέθοδος ονομάζεται Cufon. Εφευρέθηκε από έναν προγραμματιστή - τον Simo Kinnunen. Αρχικά, δημιούργησε ένα ειδικό αρχείο που πρέπει να συνδεθεί με τον ιστότοπο. Δεύτερον, δημιούργησε μια γεννήτρια που μετατρέπει οποιαδήποτε γραμματοσειρά σε JavaScript.

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

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

Αφού κατεβάσετε τη γραμματοσειρά που σας αρέσει σε μορφή .ttf, μπορείτε να την εγκαταστήσετε στον υπολογιστή σας απλά ανοίγοντάς την.

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

Εγκατάσταση απολύτως οποιασδήποτε κυριλλικής γραμματοσειράς στον ιστότοπο σε τρία βήματα

Έτσι, έχουμε γίνει κάτοχοι μιας όμορφης μη τυπικής κυριλλικής γραμματοσειράς και θέλουμε να την εγκαταστήσουμε στον ιστότοπό μας. Ποιες είναι οι ενέργειές μας;

Βήμα 1

Πηγαίνουμε στον ιστότοπο Cufon - cufon.shoqolate.com.
Κάντε κλικ στον σύνδεσμο στο μενού - Λήψη. Ανοίγει η σελίδα του σεναρίου. Απλώς αντιγράφουμε όλο τον κώδικα, τον επικολλάμε στο σημειωματάριο και τον αποθηκεύουμε με την επέκταση .js. Για τους αναγνώστες μου, έχω ετοιμάσει ένα έτοιμο αρχείο, μπορείτε να το κατεβάσετε στον υπολογιστή σας.

Προσοχή, από την ημερομηνία σύνταξης της ανάρτησης στις 26 Ιουλίου 2011, η έκδοση του σεναρίου είναι 1.09i. Είναι αυτή η έκδοση τώρα στον παραπάνω σύνδεσμο.

Μεταφόρτωση του σεναρίου στη φιλοξενία. Όποιος κάνει blog στο Blogger θα πρέπει ήδη να γνωρίζει πού να ανεβάσει ένα αρχείο τρίτου μέρους (), χρησιμοποιώ τους ιστότοπους της Google για αυτό.

Βήμα 2

Επιστρέφουμε στον ιστότοπο Cufon στην καρτέλα Generator. Μπροστά μας είναι μια σελίδα με πολλές ρυθμίσεις. Για να είμαι ειλικρινής, δεν μπήκα σε όλες τις ρυθμίσεις, αλλά κατά τη διάρκεια των πειραμάτων δοκίμασα διαφορετικές και πάντα είχα το επιθυμητό αποτέλεσμα.

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

Όπως μπορείτε να δείτε, υπάρχει ένα ξεχωριστό παράθυρο φόρτωσης για κάθε τύπο γραμματοσειράς:

• κανονική γραμματοσειρά
• έντονη γραμματοσειρά
• κανονικά πλάγια γράμματα
• έντονα πλαγιαστά

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

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

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

Επόμενο στιγμιότυπο οθόνης.

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

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

1. Δεν έγραψα τίποτα στο πρώτο πλαίσιο, αλλά νομίζω ότι το πεδίο είναι χρήσιμο από την άποψη ότι αν καθορίσετε τους τομείς στους οποίους θα χρησιμοποιηθεί η γραμματοσειρά, απλά δεν θα λειτουργήσει σε άλλους τομείς.
2. Το καταλαβαίνω στο πάνω πεδίο μιλαμεσχετικά με το μέγεθος της γραμματοσειράς από προεπιλογή. Μπορείτε να συμφωνήσετε με τη ρύθμιση ή μπορείτε να αρνηθείτε επιλέγοντας το πλαίσιο. Προσωπικά προσπάθησα με διάφορους τρόπους και έμεινα ικανοποιημένος και με τις δύο επιλογές. Νομίζω ότι εξαρτάται επίσης τόσο από την ίδια τη γραμματοσειρά όσο και από την ιδέα του σχεδιαστή προτύπων. Το επόμενο στοιχείο στο παράθυρο 2, η ίδια η γεννήτρια συνιστά να το απενεργοποιήσετε, υπό την προϋπόθεση ότι πρόκειται να χρησιμοποιήσετε μικρό μέγεθος γραμματοσειράς. Αν είναι δυνατόν, καλύτερα να βάλετε το τελευταίο σημάδι επιλογής, γιατί. χάρη σε αυτήν τη ρύθμιση, το αρχείο που δημιουργείται είναι μικρότερο, γεγονός που αναμφίβολα θα επηρεάσει τη φόρτωση της γραμματοσειράς προς το καλύτερο.
3. Και τέλος, συμφωνία με τους όρους χρήσης της γεννήτριας.

Ως αποτέλεσμα, λαμβάνουμε ένα άλλο αρχείο, το οποίο επίσης ανεβάζεται στη φιλοξενία.

Βήμα 3

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

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

Μπορείτε επίσης να καθορίσετε όχι μια ετικέτα, αλλά ένα αναγνωριστικό:

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

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

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

Και έγινε έτσι:

Πώς να εγκαταστήσετε μια προσαρμοσμένη κυριλλική γραμματοσειρά στο WordPress

Για τους χρήστες του WordPress, είναι ακόμα πολύ πιο εύκολο. Φυσικά, μπορείτε να προχωρήσετε σε όλη τη διαδρομή που περιγράφεται και η γραμματοσειρά θα λειτουργήσει επίσης, αλλά υπάρχει επίσης ένα έτοιμο πρόσθετο που ονομάζεται All-in-One Cufon. Μπορείτε να κάνετε λήψη της προσθήκης τόσο από τον ιστότοπο του προγραμματιστή όσο και απευθείας στον πίνακα διαχείρισης του ιστολογίου.

Εγκατάσταση του πρόσθετου. Δραστηριοποιώ. Μεταβείτε στις ρυθμίσεις της προσθήκης. Στην κορυφή υπάρχουν δύο προειδοποιητικά μηνύματα.

Το πρώτο είναι ότι πρέπει να δημιουργήσετε έναν φάκελο cufon-fonts στον κατάλογο wp-content/plugins/. Για να το κάνετε αυτό, συνδεθείτε μέσω FTP ή μεταβείτε στον πίνακα ελέγχου της φιλοξενίας και δημιουργήστε έναν νέο φάκελο στο φάκελο plugins που ονομάζεται cufon-fonts. Μετά από αυτό, το πρώτο μήνυμα εξαφανίζεται.

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

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

αντικατάσταση ("h1");

Παρεμπιπτόντως, αξίζει να πείτε ότι εάν έχετε εγκαταστήσει Θέμα WordPressμε μια ήδη μη τυπική γραμματοσειρά, ενώ δεν έχει κυριλλική ορθογραφία, τότε πρέπει:

1. Εγκαταστήστε την προσθήκη Cufon All-in-One.
2. Εγκαταστήστε τη γραμματοσειρά που δημιουργήθηκε.

Δεν χρειάζεται να εισαγάγετε τον κωδικό Cufon στο παρακάτω πεδίο, κατά κανόνα, αυτός ο κωδικός είναι ήδη γραμμένος στο πρότυπο. Αν θέλετε να εγκαταστήσετε άλλη γραμματοσειρά, εκτός από την υπάρχουσα, τότε θα χρειαστεί να γίνει μια τέτοια καταχώρηση, όπως έγραψα στα παραπάνω παραδείγματα.

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

Και τότε ο κωδικός Cufon θα πρέπει να είναι ως εξής: