Μάθετε να χρησιμοποιείτε το CSS για να αλλάξετε χαρακτηριστικά γραμματοσειράς
Γραμματοσειρές και CSS
Το CSS είναι ο πιο αποτελεσματικός τρόπος για να προσαρμόσετε τις γραμματοσειρές στην ιστοσελίδα σας. Μπορείτε να ελέγξετε την οικογένεια γραμματοσειρών , το μέγεθος, το χρώμα, το βάρος και πολλές άλλες πτυχές της τυπογραφίας.
Οι ιδιότητες γραμματοσειράς στο CSS είναι ένας από τους πιο συνηθισμένους τρόπους για να κάνετε τη σελίδα σας πιο διακριτική και μοναδική. Είναι εύκολο να αλλάξετε το χρώμα, το μέγεθος και ακόμη και το πρόσωπο (η ίδια η γραμματοσειρά) του κειμένου σας με ιδιότητες γραμματοσειράς CSS .
- χρώμα
- γραμματοσειρά-οικογένεια
- μέγεθος γραμματοσειράς
Υπάρχουν τρία μέρη σε μια γραμματοσειρά:
- χρώμα
- Αυτό είναι το χρώμα που θα εμφανιστεί η γραμματοσειρά ως στην οθόνη.
- Μέγεθος
- Αυτό είναι το πόσο μεγάλο ή μικρό το γραμματοσειρά θα εμφανιστεί στην οθόνη.
- πρόσωπο
- Αυτή είναι η οικογένεια γραμματοσειρών, η οποία συχνά αναφέρεται ως η πραγματική γραμματοσειρά.
Χρώματα γραμματοσειρών
Για να αλλάξετε το χρώμα του κειμένου, απλά χρησιμοποιήστε την ιδιότητα στυλ χρώματος CSS. Μπορείτε να χρησιμοποιήσετε είτε τα ονόματα χρωμάτων είτε τους δεκαεξαδικούς κωδικούς. Όπως συμβαίνει με όλα τα χρώματα στον ιστό, είναι καλύτερο να χρησιμοποιείτε ασφαλή χρώματα του προγράμματος περιήγησης .
Δοκιμάστε τα παρακάτω στυλ στις ιστοσελίδες σας:
αυτή η γραμματοσειρά έχει χρώμα κόκκινο
αυτή η γραμματοσειρά είναι μπλε
Μεγέθη γραμματοσειράς
Όταν ρυθμίζετε το μέγεθος γραμματοσειράς στον ιστό, μπορείτε να το ορίσετε σε σχετικά μεγέθη ή να είστε πολύ συγκεκριμένοι χρησιμοποιώντας pixels, centimeters ή ίντσες. Ωστόσο, τα ακριβέστερα μεγέθη γραμματοσειρών προορίζονται να χρησιμοποιηθούν για εκτύπωση και όχι για ιστοσελίδες, όπου όλοι όσοι προβάλλουν τον ιστότοπό σας ενδέχεται να έχουν διαφορετική ανάλυση, μέγεθος οθόνης ή προεπιλεγμένη ρύθμιση γραμματοσειράς. Έτσι, αν επιλέξετε ως κανονικό μέγεθος 15px, ίσως να εκπλαγείτε δυσάρεστα για να δείτε πόσο μεγάλο ή μικρό το μέγεθος της γραμματοσειράς σας αποδίδεται στους πελάτες σας.
Σας συνιστούμε να χρησιμοποιήσετε το ems για το μέγεθος της γραμματοσειράς . Τα Ems επιτρέπουν στη σελίδα σας να παραμένει προσβάσιμη ανεξάρτητα από το ποια είναι η προβολή της, και τα ems προορίζονται για rendering οθόνης. Αφήστε τα εικονοστοιχεία και τα σημεία για απόδοση εκτύπωσης. Για να αλλάξετε το μέγεθος της γραμματοσειράς, τοποθετήστε το παρακάτω στυλ στην ιστοσελίδα σας:
αυτή η γραμματοσειρά είναι 1em
αυτή η γραμματοσειρά είναι .75em
αυτή η γραμματοσειρά είναι 1,25εμ
Γραμματοσειρές Faces
Το πρόσωπο της γραμματοσειράς σας είναι αυτό που πολλοί άνθρωποι σκέφτονται όταν σκέφτονται "γραμματοσειρά". Μπορείτε να δηλώσετε οποιοδήποτε πρόσωπο γραμματοσειράς που θα θέλατε, αλλά θυμηθείτε, αν ο αναγνώστης σας δεν έχει εγκαταστήσει τη γραμματοσειρά, το πρόγραμμα περιήγησης θα προσπαθήσει να βρει έναν αγώνα για αυτό, και η σελίδα τους δεν θα φαίνεται όπως εσείς σκοπεύατε.
Για να αντιμετωπίσετε αυτό το πρόβλημα, μπορείτε να καθορίσετε μια λίστα με τα ονόματα προσώπων, χωρισμένα με κόμματα, ώστε το πρόγραμμα περιήγησης να χρησιμοποιηθεί κατά σειρά προτιμήσεων. Αυτά ονομάζονται στοίβα γραμματοσειρών. Λάβετε υπόψη ότι μια τυποποιημένη γραμματοσειρά σε έναν υπολογιστή (όπως το Arial) ενδέχεται να μην είναι στάνταρ σε ένα Macintosh. Συνεπώς, θα πρέπει πάντα να βλέπετε τις σελίδες σας με ένα ελάχιστα εγκατεστημένο μηχάνημα (και κατά προτίμηση και στις δύο πλατφόρμες), για να βεβαιωθείτε ότι η σελίδα σας φαίνεται σχεδιασμένη ακόμα και με ελάχιστες γραμματοσειρές.
Ένα από τα αγαπημένα μου στοίβα γραμματοσειρών είναι Αυτό το σετ είναι μια συλλογή γραμματοσειρών sans-serif και ενώ το geneva και το arial δεν φαίνονται τρομερά παρόμοια, είναι και τα δύο αρκετά συνηθισμένα σε υπολογιστές Macintosh και Windows . Συμπεριλαμβάνω τα helvetica και helv για τους πελάτες σε άλλα λειτουργικά συστήματα όπως το Unix ή το Linux που μπορεί να μην έχουν μια ισχυρή βιβλιοθήκη γραμματοσειρών.
αυτή η γραμματοσειρά είναι sans-serif
αυτή η γραμματοσειρά είναι serif