Πώς να χρησιμοποιήσετε καλύτερα τις γραμματοσειρές στο CSS;

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

• Γραμματοσειρές σε CSS
• Χαρακτηριστικά σε γραμματοσειρά CSS
• χαρακτηριστικό στυλ γραμματοσειράς
• χαρακτηριστικό βάρους γραμματοσειράς
• χαρακτηριστικό μεγέθους γραμματοσειράς
• χαρακτηριστικό font-family

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

Μη ενοχλητική αναγνωσιμότητα - Θέλετε να ελέγξετε την τελευταία βαθμολογία αγώνα ενώ βρίσκεστε στο γραφείο. Προφανώς θέλετε μια γρήγορη ενημέρωση κειμένου, όχι ένα θορυβώδες βίντεο!
Απαίτηση χαμηλού εύρους ζώνης δικτύου - Το περιεχόμενο κειμένου μπορεί να φορτωθεί ακόμη και σε κακές περιοχές σύνδεσης στο Διαδίκτυο, ενώ τα εμπλουτισμένα μέσα δεν μπορούν.
Φιλικό προς την αναζήτηση - Οι ιστότοποι παρακολουθούν πάντα πόσο εύκολα παρατηρείται το περιεχόμενό τους στις μηχανές αναζήτησης. Το κείμενο είναι το πιο κατάλληλο για αυτό, τουλάχιστον έως ότου η AI κατακτήσει πλήρως το Διαδίκτυο!

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

Για ένα περιεκτικό σεμινάριο CSS, επισκεφθείτε το Edureka CSS Tutorial For Beginners. Θα έχετε μια εξαιρετική ενημέρωση σχετικά με τον τρόπο που το CSS πρόκειται να συνηθίσει για την αύξηση του σχεδιασμού ιστοσελίδων HTML.

Προχωρώντας με αυτό το άρθρο σχετικά με τις γραμματοσειρές στο CSS

Γραμματοσειρές σε CSS

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

Παράδειγμα 1: Επικεφαλίδες και παράγραφο σε διάφορες γραμματοσειρές

body {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: πλάγια γραφή 12px / 30px Georgia, serif}
Η παράγραφος με πλάγια γραμματοσειρά Georgia
 

 Παράδειγμα 1: Έξοδος 

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

προεπιλεγμένη τιμή του char σε java

Προχωρώντας με αυτό το άρθρο σχετικά με τις γραμματοσειρές στο CSS

Χαρακτηριστικά σε γραμματοσειρά CSS

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

Στο Παράδειγμα 1, χρησιμοποιήσαμε διαφορετικά ονόματα γραμματοσειρών για τις επικεφαλίδες και την παράγραφο. Κάτω από τις ετικέτες h1 και p, εμφανίζονται δύο ονόματα γραμματοσειρών, ενώ η ετικέτα h2 ονομάζει μόνο μία γραμματοσειρά. Αυτός είναι ο ορισμός μιας οικογένειας γραμματοσειρών, περισσότερα για αυτό αργότερα.

Προχωρώντας με αυτό το άρθρο σχετικά με τις γραμματοσειρές στο CSS

χαρακτηριστικό στυλ γραμματοσειράς:

Τα δύο κύρια στυλ που μπορούν να ρυθμιστούν είναι «κανονικά» και «πλάγια». Πλάγια πλάτη υποτίθεται ότι είναι ευθεία στη φύση με κλίση. Normal είναι η προεπιλεγμένη επιλογή που είναι ευθεία. Υπάρχει μια άλλη λιγότερο χρησιμοποιημένη επιλογή που ονομάζεται «πλάγια», η οποία μοιάζει με την πλάγια επιλογή στις περισσότερες γραμματοσειρές. Μπορείτε επίσης να ορίσετε το στυλ σε 'κληρονομικό' έτσι ώστε να παίρνει το στυλ γραμματοσειράς από το γονικό του στοιχείο.

Προχωρώντας με αυτό το άρθρο σχετικά με τις γραμματοσειρές στο CSS

πώς να αποκτήσετε μήκος javascript του πίνακα

χαρακτηριστικό βάρους γραμματοσειράς:

Αυτό το χαρακτηριστικό αποφασίζει εάν η γραμματοσειρά θα πρέπει να εμφανίζεται παχιά ή λεπτή. Μπορεί να οριστεί σε «κανονική» ή «έντονη». Η προεπιλεγμένη τιμή είναι φυσιολογική. Αυτή η τιμή μπορεί επίσης να οριστεί ως αριθμητική. Το βάρος των 400 αντιπροσωπεύει το κανονικό και το 700 είναι τολμηρό. Υπάρχουν λίγες άλλες ρυθμίσεις (κυμαίνονται από 100 - πολύ ελαφρύ έως 900 - πολύ έντονα), αλλά δεν υποστηρίζονται από όλες τις γραμματοσειρές. Όλες οι επιλογές βάρους φαίνονται στο Παράδειγμα 3.

Προχωρώντας με αυτό το άρθρο σχετικά με τις γραμματοσειρές στο CSS

χαρακτηριστικό μεγέθους γραμματοσειράς:

Το χαρακτηριστικό size μπορεί να οριστεί με πολλούς τρόπους. Ας απαριθμήσουμε τους παρακάτω τρόπους.
● Αριθμημένη τιμή όπως «μεσαίο», «μεγάλο». Στην πραγματικότητα, όπως και τα μεγέθη ρούχων, οι τιμές μπορούν να κυμαίνονται από XX Small έως XX Large!
● Ορισμός σε σχέση με το γονικό του στοιχείο, ως «μεγαλύτερο» ή «μικρότερο».
● Ποσοστό του μεγέθους του γονικού στοιχείου.
● Ορίστε ως 'κληρονομικό' για να υιοθετήσετε άμεσα το μέγεθος του γονικού στοιχείου.
● Ως απόλυτη τιμή στις μονάδες px (pixel), pt (σημεία) ή cm (εκατοστόμετρο)
Το 'Medium' είναι η προεπιλεγμένη τιμή που έχει οριστεί για αυτήν την παράμετρο.

Προχωρώντας με αυτό το άρθρο σχετικά με τις γραμματοσειρές στο CSS

χαρακτηριστικό font-family:

Σε HTML, η οικογένεια γραμματοσειρών CSS προορίζεται για τον καθορισμό του ονόματος γραμματοσειράς. Μπορείτε είτε να βάλετε μόνο ένα όνομα γραμματοσειράς με την ετικέτα. Εναλλακτικά, μπορείτε να εκχωρήσετε πολλές τιμές ως λίστα οικογένειας γραμματοσειρών που καθορίζει την προτεραιότητα στην οποία το πρόγραμμα περιήγησης πρέπει να επιλέξει τη γραμματοσειρά.
Η λίστα έχει προτεραιότητα από τα αριστερά προς τα δεξιά, με τη μορφή συστήματος εναλλακτικής υποστήριξης. Επιλέγεται η πρώτη τιμή εάν είναι διαθέσιμη ή ο έλεγχος πηγαίνει στην επόμενη, μέχρι να φτάσει στο τέλος της λίστας. Η προεπιλεγμένη οικογένεια γραμματοσειρών καθορίζεται από τις προτιμήσεις του προγράμματος περιήγησης.
Οι οικογένειες γραμματοσειρών CSS είναι 2 τύπων - γενικές οικογένειες και οικογένειες γραμματοσειρών.
● Γενικές οικογένειες - με βάση ορισμένα γενικά χαρακτηριστικά, οι γραμματοσειρές ομαδοποιούνται ως 'serif', 'sans serif', 'monospace' κ.λπ. Για παράδειγμα, το Sans serif σημαίνει γραμματοσειρές χωρίς το στυλ serif.
● Οικογενειακά ονόματα - γραμματοσειρές που ανήκουν σε συγκεκριμένες οικογενειακές ιεραρχίες. Οι Times, Arial, Courier είναι όλες οι γραμματοσειρές και το Times New Roman είναι ένα παράδειγμα γραμματοσειράς της οικογένειας Times.
Οι διάφορες επιλογές χρήσης οικογένειας γραμματοσειρών παρατίθενται στο Παράδειγμα 4 παρακάτω.

Μερικά κοινά σημεία που πρέπει να σημειωθούν

● Όπως πολλές άλλες ιδιότητες CSS, ορισμένες από τις ρυθμίσεις γραμματοσειράς διαφέρουν σε διαφορετικά προγράμματα περιήγησης. Ελέγξτε για υποστήριξη προγράμματος περιήγησης πριν χρησιμοποιήσετε μερικές σπάνιες ρυθμίσεις γραμματοσειράς.
● Μπορείτε να ορίσετε τις ρυθμίσεις γραμματοσειράς ξεχωριστά χρησιμοποιώντας τις μεμονωμένες ετικέτες στυλ γραμματοσειράς, βάρος γραμματοσειράς κ.λπ. Εναλλακτικά, εάν προτιμάτε συμπαγή κώδικα, μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό γραμματοσειράς στενότητας με όλες τις τιμές στην ίδια γραμμή.
● Σε σενάρια χρήστη όπου θέλετε η γραμματοσειρά να ποικίλει σε μέγεθος ανάλογα με το μέγεθος του προγράμματος περιήγησης, υπάρχει μια χρήσιμη ρύθμιση μεγέθους γραμματοσειράς που ονομάζεται ρύθμιση αποκριτικής γραμματοσειράς. Μπορεί να ρυθμιστεί με μονάδα vw, που σημαίνει 'πλάτος θύρας προβολής'. Με αυτόν τον τρόπο το μέγεθος κειμένου θα ακολουθήσει το μέγεθος του παραθύρου του προγράμματος περιήγησης.

Ελπίζω να βρείτε τις πληροφορίες που αναζητούσατε στο Fonts In CSS. Μοιραστείτε την εμπειρία σας μαζί μας στην παρακάτω ενότητα σχολίων. Καλή σχεδίαση!

Εάν σας ενδιαφέρει να μάθετε περισσότερα σχετικά με την ανάπτυξη ιστού, ρίξτε μια ματιά στο από την Edureka. Η Εκπαίδευση Πιστοποίησης Ανάπτυξης Ιστού θα σας βοηθήσει να μάθετε πώς να δημιουργείτε εντυπωσιακούς ιστότοπους χρησιμοποιώντας HTML5, CSS3, Twitter Bootstrap 3, jQuery και Google API και να το αναπτύξετε στην υπηρεσία απλής αποθήκευσης Amazon (S3)