Πώς να ενσωματώσετε γραμματοσειρές Google στο ιστολόγιό σας; Σύνδεση γραμματοσειρών Google
Σύνθεση
Για παράδειγμα - επέλεξα τη γραμματοσειρά "Marck Script".
1. Πηγαίνετε στον κατάλογο και επιλέξτε μια γραμματοσειρά για τον εαυτό σας. Μπορείτε να βρείτε ολόκληρο τον κατάλογο γραμματοσειρών εδώ: google.com/webfonts
Επιλέξτε τα σύνολα χαρακτήρων που θέλετε:
Λατινικά (λατινικά)
Λατινικά εκτεταμένα (latin-ext)
Κυριλλικό (κυριλλικό)
Επιλέξτε "Λατινικά" και "Κυριλλικά". Σας συμβουλεύω να μην επιλέξετε άλλες επιλογές, καθώς σε αυτήν την περίπτωση η φόρτωση της σελίδας θα χρειαστεί πολύ χρόνο και μερικές φορές η γραμματοσειρά απλά δεν θα λειτουργήσει.
3. Στην τρίτη παράγραφο, θα δείτε τον κώδικα που θα πρέπει να εισαχθεί στο blog, αλλά μετά από λίγη βελτίωση. Για παράδειγμα, για τη γραμματοσειρά μου - αυτός ο κώδικας προορίζεται:
Αυτός ο κωδικός πρέπει να αλλάξει για να λειτουργεί σωστά στο ιστολόγιο.
3.1 Προσθέστε "/" στο τέλος του κωδικού πριν από το ">", και αν ο κωδικός σας έχει αυτό το σύμβολο - "&" βάλτε "&" αντί.
Εγκατάσταση
1. Συνδεθείτε στον λογαριασμό σας στο blogger.com.
Στη συνέχεια, μεταβείτε στο Σχεδίαση ---> Επεξεργασία HTML
2. Χρησιμοποιώντας την αναζήτηση (Ctrl+F) θα χρειαστεί να βρείτε αυτήν τη γραμμή στο πρότυπό σας:
3. Μετά από αυτό, προσθέστε τον κωδικό γραμματοσειράς και αποθηκεύστε το πρότυπο.
Χρήση
Μπορείτε να χρησιμοποιήσετε την εγκατεστημένη γραμματοσειρά οπουδήποτε στο ιστολόγιό σας. Για παράδειγμα, εάν θέλετε το "όνομα ιστότοπου" να έχει αυτήν τη γραμματοσειρά, τότε πρέπει:
1. Μεταβείτε στο Σχεδίαση ---> Επεξεργασία HTML
2. Χρησιμοποιήστε την αναζήτηση (Ctrl+F) για να βρείτε αυτήν τη γραμμή στο πρότυπό σας:
κεφαλίδα h1
#header h1 (
Ύψος γραμμής: 1,2 εκ.
text-transform:κεφαλαία;
διάστιχο: .1em;
}
2.2 Εάν ο κωδικός "header h1" δεν έχει γραμμή οικογένειας γραμματοσειρών, προσθέστε τον:
font-family:Marck Script, Georgia, serif;
2.2.1 Αντί για "Marck Script" - βάλτε το όνομα της γραμματοσειράς σας. Το όνομα βρίσκεται στη σελίδα της γραμματοσειράς, στην τέταρτη παράγραφο.
2.3 Αυτό είναι. Μπορείτε επίσης να δοκιμάσετε να προσθέσετε τη γραμματοσειρά σε άλλα μέρη στο ιστολόγιό σας, όπως "sidebar", "post-body" ή "post h2".
Επιτέλους πήρε τα χέρια πώς να αλλάξετε τη γραμματοσειρά του τίτλου του ιστότοπου. Δεν μου αρέσουν τα πολύπλοκα πράγματα, επομένως πάντα απλοποιώ τα πάντα όσο το δυνατόν περισσότερο. Σας προσφέρω έναν απλό, γρήγορο και χωρίς βαθιά γνώση html τρόπο για να αλλάξετε τη γραμματοσειρά, το μέγεθος και το χρώμα της κεφαλίδας του ιστότοπού σας.
Μόνο τρεις γραμμές στο πρόγραμμα επεξεργασίας, και θα έχετε πραγματική ευχαρίστηση από τη δική σας δημιουργικότητα στον ιστότοπο. Επιπλέον, εάν χρησιμοποιήσετε ένα δωρεάν πρότυπο, ο ιστότοπος θα αρχίσει να αποκτά μεμονωμένες λειτουργίες.
Προφυλάξεις για όσους δεν είναι σίγουροι
- Ας ξεκινήσουμε, έτσι; ότι μιλάμε για θέματα (πρότυπα) WordPress. Εάν το θέμα του ιστολογίου έχει οριστεί σε αυτήν τη μηχανή, τότε αυτό το άρθρο είναι για εσάς.
- Εάν δεν είστε σίγουροι για τις ικανότητές σας, είναι καλύτερα να πειραματιστείτε πρώτα σε έναν δοκιμαστικό υποτομέα. Αφού βεβαιωθείτε ότι είστε ικανοί, μπορείτε να μεταφέρετε την ικανότητα στον κύριο ιστότοπο. Ωστόσο, τα βήματα που απαιτούνται για να αλλαγή γραμματοσειράς τίτλου ιστότοπου, είναι τόσο απλά που είναι δύσκολο να τα βιδώσεις εκεί. Προσωπικά, τα κάνω πάντα πρώτα σε μια δοκιμή. Λίγο περισσότερο χρόνο, αλλά πιο αξιόπιστο.
- Σε περίπτωση που ο ιστότοπος εξακολουθεί να είναι χαλασμένος, διαβάστε >>. Αλλά, αν όλα γίνουν προσεκτικά, δεν θα συμβούν καταστροφές.
Μια γραμμή κώδικα μπορεί να φαίνεται διαφορετική σε διαφορετικά πρότυπα. Για να μάθετε πώς στο πρότυπό σας, ανατρέξτε στο άρθρο, . Υπάρχει ένα λεπτομερές βίντεο σχετικά με τον τρόπο εύρεσης οποιασδήποτε γραμμής κώδικα - μετά από το οποίο μπορείτε να κάνετε σχεδόν οποιεσδήποτε αλλαγές στο πρότυπο του ιστότοπού σας. Η δεξιοτεχνία θα σας απαλλάξει από την ανάγκη να ψαχουλέψετε τους κωδικούς και να λύσετε τα χέρια σας.
Εάν δεν το καταλαβαίνετε μόνοι σας και θέλετε να βρείτε έναν καλό ελεύθερο επαγγελματία που να καταλαβαίνει τους κωδικούς, τότε το άρθρο σχετικά έχει έναν χρήσιμο σύνδεσμο πού να απευθυνθείτε σε περίπτωση έκτακτης ανάγκης.
Οδηγίες για την αλλαγή της γραμματοσειράς στην κεφαλίδα του ιστότοπου
Και αν δεν υπάρχει χρόνος να το καταλάβετε, αλλά το θέλετε πιο γρήγορα Για τα πάντα για τα πάντα, χρειαζόμαστε τον ιστότοπό μας και το πρόγραμμα λέξεων (για επιλογή γραμματοσειράς).
- Μπαίνουμε στον πίνακα διαχείρισης του ιστότοπού μας. Στη συνέχεια, στην αριστερή πλαϊνή μπάρα βρίσκουμε Κονσόλα - Εμφάνιση - Επεξεργαστής.
- Στη δεξιά πλευρά βρίσκουμε Λίστα στυλ (style.css)και ανοίξτε το.
- Ο τίτλος του ιστότοπου είναι κεφαλίδα h1. Βρίσκεται πιο κοντά στην αρχή. Για να μην κάνετε αναζήτηση με τα μάτια σας, μπορείτε να πατήσετε Ctrl + F - θα εμφανιστεί μια γραμμή αναζήτησης. Πληκτρολογήστε στην αναζήτηση. Αυτό το μέρος μου φαίνεται κάπως έτσι:
Πάνω τετράγωνο:συμβολοσειρά αλλαγής γραμματοσειράς.
Κάτω τετράγωνο:συμβολοσειρά μεγέθους γραμματοσειράς.
Αργότερα, θα αλλάξουμε το μέγεθος και το χρώμα της γραμματοσειράς, εάν είναι απαραίτητο.
Πώς να αλλάξετε τη γραμματοσειρά του τίτλου του ιστότοπου
- Τώρα ανοίγουμε ένα κενό έγγραφο του Word, αντιγράφουμε τον τίτλο στην κεντρική σελίδα του ιστότοπου και το μεταφέρουμε σε ένα έγγραφο του Word, το επιλέγουμε και ξεκινάμε να παίζουμε με διαφορετικές γραμματοσειρές. Βρίσκονται στον επάνω πίνακα στην αριστερή γωνία. Γιατί είναι βολικό να το κάνετε σε αυτό το πρόγραμμα - επειδή όλες οι αλλαγές γραμματοσειράς στο όνομά σας είναι αμέσως ορατές. Επιλέξτε μια γραμματοσειρά που ταιριάζει με το όνομα του ιστότοπού σας. Μια γραμματοσειρά που σίγουρα θα σας αρέσει. Όταν επιλεγεί, αντιγράψτε το όνομα της γραμματοσειράς στο Worde.
- Επιστρέφουμε στον πίνακα διαχείρισης του ιστότοπου. Στη γραμμή για την αλλαγή της γραμματοσειράς (στο σχήμα - το πάνω μπλε τετράγωνο), εισάγουμε το όνομα της επιλεγμένης γραμματοσειράς αντί της προεπιλεγμένης.
- Κάντε κλικ στο "Ενημέρωση αρχείου" στο κάτω μέρος της σελίδας.
- Πηγαίνουμε στον ιστότοπο και βλέπουμε αν η γραμματοσειρά ταιριάζει καλά στο γενικό πλαίσιο. Εάν όχι, επιστρέψτε στο Word και επιλέξτε άλλο. Τα παντα.
Πώς να αλλάξετε το μέγεθος της γραμματοσειράς του τίτλου του ιστότοπου
Αυτό γίνεται στο ίδιο πρότυπο επεξεργασίας. Στην παραπάνω εικόνα - το δεύτερο μπλε τετράγωνο. Το μόνο που χρειάζεται να κάνετε εκεί είναι να βάλετε άλλους αριθμούς - η γραμματοσειρά θα γίνει μεγαλύτερη ή μικρότερη ανάλογα με το τι χρειάζεστε. Αποθηκεύουμε τις αλλαγές, πηγαίνουμε στον ιστότοπο και βλέπουμε αν όλα μας ταιριάζουν.
Πώς να αλλάξετε το χρώμα της γραμματοσειράς του τίτλου του ιστότοπου
Γίνεται εκεί. Υπάρχει μια γραμμή στο επόμενο μπλοκ μετά από όπου αλλάξαμε την ίδια τη γραμματοσειρά και το μέγεθός της. Φαίνεται κάπως έτσι:
Για να επιλέξετε ένα χρώμα, μπορείτε να χρησιμοποιήσετε μία από τις επιλογές θέματος: Κονσόλα - Εμφάνιση - Φόντο. Στη γραμμή "Χρώμα φόντου", μπορείτε να επιλέξετε ένα χρώμα, να αντιγράψετε την αλφαριθμητική του τιμή και να το επικολλήσετε αντί για αυτό που ήταν (στην περίπτωσή μου # 11006a). Αποθήκευσε τις αλλαγές. Πηγαίνουμε στο site και θαυμάζουμε.
Έτσι για να αλλαγή γραμματοσειράς, χρώματος και μεγέθους, πρέπει να κάνετε αλλαγές σε μόλις 3 γραμμές του προγράμματος επεξεργασίας. Με λίγη δεξιότητα, χρειάζεται πολύ λίγος χρόνος.
Όμορφος, καλοδιαβασμένος τίτλος,
σύμφωνη με το γενικό πνεύμα του θέματος,
θα κάνει το blog σας πιο ελκυστικό και αξέχαστο.
Πειραματιστείτε, επιλέξτε αυτό που σας αρέσει!
ΥΣΤΕΡΟΓΡΑΦΟ.Όταν κάνω ακόμη και μικρές αλλαγές στα αρχεία του προγράμματος επεξεργασίας θέματος, για κάθε ενδεχόμενο, αντιγράφω το αλλαγμένο κείμενο εξ ολοκλήρου στο σημειωματάριο - στο φάκελο όπου είναι αποθηκευμένο το zip του θέματος που είναι εγκατεστημένο στον ιστότοπό μου. Σε περίπτωση που ο ιστότοπος σπάσει ξαφνικά και καταστεί απαραίτητο να εγκαταστήσετε ξανά το θέμα, έχω αποθηκεύσει όλα τα αρχεία που έχουν αλλάξει σύμφωνα με το γούστο μου. Απομένει μόνο κατά την επανεγκατάσταση του wordpress ή του θέματος να μεταφέρετε τα αρχεία στους κατάλληλους φακέλους στο hosting.
Στα επόμενα άρθρα, καθώς μεταμορφώνουμε το ιστολόγιό μου, θα αλλάξουμε το ίδιο εύκολα το χρώμα του φόντου, τις γραμματοσειρές επικεφαλίδων σε ενότητες, άρθρα, το χρώμα των συνδέσμων - με μια λέξη, τυχόν στοιχεία
Irina Kudryavtseva
Ο Justus έδειξε μια επιλογή, θέλω να δω περισσότερες πιθανές γραμματοσειρές!
https://www.blogger.com/profile/03714046357448661094
Irina Kudryavtseva,δυστυχώς αυτή είναι η μόνη "μη τυπική" γραμματοσειρά που έχω συναντήσει (στο Blogspot). Αν κάποιος γνωρίζει άλλες γραμματοσειρές, θα χαρώ να γνωριστούμε!
Σι.Α.Α.
Υπάρχει δυνατότητα αλλαγής της γραμματοσειράς σε παρτίδες, δηλαδή σε όλα τα μηνύματα ταυτόχρονα; Και μετά με χίλια μηνύματα πριν από τη συνταξιοδότηση, θα πρέπει να επαναλάβετε τα μηνύματα.
Σι.Α.Α.χρειάζεται να σκεφτείς! Δώστε χρόνο μέχρι αύριο!
https://www.blogger.com/profile/13746790384341325111
Σι.Α.Α.
πείστηκε. Αλλά μόνο μια μέρα. ;)
https://www.blogger.com/profile/06106872544132460143
Σι.Α.Α.η αίτησή σας έχει ολοκληρωθεί! Στο τέλος της ανάρτησης δημοσιεύτηκε το εγχειρίδιο εγκατάστασης. Μια απλή λύση δεν πέτυχε, πρέπει να "σκάψετε βαθύτερα" στο πρότυπο! Επιπλέον, δεν είναι γνωστό πώς αυτό θα επηρεάσει τον συνολικό σχεδιασμό του ιστολογίου;
https://www.blogger.com/profile/13746790384341325111
MagentaWAVE
"δυστυχώς αυτή είναι η μόνη "μη τυπική" γραμματοσειρά που έχω συναντήσει (στο Blogspot). Αν κάποιος γνωρίζει άλλες γραμματοσειρές, θα χαρώ να γνωριστούμε!"
Τολμώ να στείλω spam τον σύνδεσμο
http://www.magentawave.com/2013/01/connect-and-use-web-fonts.html
Πιο πρόσφατα, μάλωσα για αυτά τα θέματα,
https://www.blogger.com/profile/05069681985675276048
MagentaWAVE,Ευχαριστώ, θα βάλω τον σύνδεσμό σας στο τέλος της ανάρτησης, για έμπειρους αναγνώστες!
https://www.blogger.com/profile/13746790384341325111
Σι.Α.Α.
Ευχαριστώ, αλλά τρομακτικό μετά την προειδοποίηση "πώς αυτό θα επηρεάσει τον σχεδιασμό του ιστολογίου."
https://www.blogger.com/profile/06106872544132460143
Σι.Α.Α.Εννοούσα ότι εκτός από το κείμενο, η γραμματοσειρά θα πάει και αλλού! Οπου...? Θα είναι ορατό μόνο μετά την εγκατάσταση του κωδικού! Δεν νομίζω ότι θα χειροτερέψει. Σε κάθε περίπτωση, μπορείτε να επιστρέψετε τα πάντα πίσω!
https://www.blogger.com/profile/13746790384341325111
Μαρίνα Κουγιάροβα
Ευχαριστώ για την συμβουλή. Εάν αλλάξετε τη γραμματοσειρά στον κώδικα σε οποιαδήποτε που υποστηρίζεται από το πρότυπο, τότε οι γραμματοσειρές μπορούν να αλλάξουν, για παράδειγμα, σε gadget (κάτι που έκανα :))
https://www.blogger.com/profile/05106932572444773407
ΟΛΕΝ ΣΑΒΙΤΣΚΑΓΙΑ
Με συγχωρείτε, παρακαλώ, η ίδια η τσαγιέρα, αλλά πού είναι ο επεξεργαστής κειμένου; Δεν το βλέπω κενό... και πού είναι το HTML του προτύπου - είναι εκεί-όπου-όταν κάνατε κλικ στο -πρότυπο-επόμενο-αλλαγή HTML; αλλα αν ειναι εκει δεν το βλεπω καθολου για αυτο που γραφεις.ναι καλα ετσι ειναι δεν μου κανει τιποτα..και πεσανε τα φυλλα και τωρα δεν πεφτουν για δευτερη μερα .. πού πήγαν τότε;!
https://www.blogger.com/profile/04422214255958505740
OLENA SAVITSKAYA,για παράδειγμα, πληκτρολόγησα το Google και βρήκα αμέσως ένα άρθρο για εσάς με ένα βίντεο:
http://mlmvsem.blogspot.de/2012/01/blogspot.html
https://www.blogger.com/profile/13746790384341325111
Χριστίνα Αζάροβα
Που είδες τέτοιες ετικέτες! Εάν γράψετε ένα κοπάδι, τότε γράψτε ότι για τυπικά πρότυπα, σε αυτογραφικά δεν υπάρχει τίποτα τέτοιο και δεν θα λειτουργήσει.
https://www.blogger.com/profile/05518665193214781905
Χριστίνα Αζάροβα,Οι ετικέτες λαμβάνονται από τυπικά πρότυπα και υπάρχουν, αλλά η εύρεση τους στο νέο "Επεξεργασία HTML" είναι πολύ δύσκολη!
https://www.blogger.com/profile/13746790384341325111
Vladimir Televnoy
Ο ιστότοπος έχει μια επιλογή από γραμματοσειρές ιστού, αλλά ακόμα δεν καταλαβαίνω πώς να το χρησιμοποιήσω, http://www.google.com/fonts/
Vladimir Televnoy
Αν θέλετε να προτείνετε. Ο ιστότοπος δημιουργεί συνδέσμους και σενάρια, αλλά τι και πού να εισαγάγετε ...
https://www.blogger.com/profile/16497829425382739102
Ιρίνα Μπουσουρμάνοβα
Θέλω καλλιγραφικό χειρόγραφο, αλλά αυτό είναι ΦΡΙΚΤΟ για μια τσαγιέρα!
https://www.blogger.com/profile/10826754143079211427
Πώς να αλλάξετε τη γραμματοσειρά στον ιστότοπό σας; Πώς να συνδέσετε δημόσιες γραμματοσειρές από τη βιβλιοθήκη του Google Fonts και τι γίνεται εάν η γραμματοσειρά είναι αποκλειστική; Εάν οι ερωτήσεις είναι σχετικές με εσάς, διαβάστε παρακάτω.
Μορφές γραμματοσειρών
Όπως και άλλοι τύποι αρχείων, οι γραμματοσειρές διατίθενται σε διαφορετικές μορφές. Υπάρχουν αρκετές δεκάδες από αυτά συνολικά και τα TTF, EOT, WOFF και SVG θεωρούνται τα πιο δημοφιλή από αυτά που χρησιμοποιούνται στο δίκτυο. Επιπλέον, το καθένα υποστηρίζεται μόνο από ορισμένες εκδόσεις του λογισμικού.
Εκτός από το ότι ανήκουν σε συγκεκριμένα συστήματα, διαφέρουν στην τεχνολογία απόδοσης χαρακτήρων και στη μέθοδο συμπίεσης. Ο όγκος του ληφθέντος αρχείου εξαρτάται από το τελευταίο, το οποίο επηρεάζει άμεσα τον χρόνο λήψης του και ως εκ τούτου την ταχύτητα εμφάνισης της σελίδας. Αυτό είναι κρίσιμο μόνο κατά την εγκατάσταση μιας νέας γραμματοσειράς, καθώς μετά τη λήψη του αρχείου που την περιέχει θα αποθηκευτεί στην κρυφή μνήμη. Αυτή τη στιγμή, κατά την ενσωμάτωση μιας συγκεκριμένης γραμματοσειράς σε έναν ιστότοπο, πρέπει να προετοιμάσετε όλες αυτές τις μορφές γραμματοσειράς: TTF (ή OTF), WOFF, EOT και SVG .
Σύνδεση γραμματοσειρών Google
Για να διευκολύνει την εργασία με γραμματοσειρές, η Google δημιούργησε την υπηρεσία Fonts, η οποία περιέχει αρκετές εκατοντάδες γραμματοσειρές, συμπεριλαμβανομένων δεκάδων κυριλλικών γραμματοσειρών.
Αφού επιλέξετε τις επιθυμητές γραμματοσειρές, και μπορεί να υπάρχουν πολλές από αυτές, η υπηρεσία σχηματίζει ένα ελαχιστοποιημένο παράθυρο με τις λειτουργίες "standard" και "import", καθεμία από τις οποίες έχει δύο τύπους κώδικα:
- προσθέστε ειδικές. μια γραμμή στον τίτλο του εγγράφου HTML μεταξύ των ετικετών + γράψτε τον επιθυμητό συνδυασμό στο αρχείο CSS.
- ή γράψτε μια άλλη γραμμή ανάμεσα στις ετικέτες