Πώς να χρησιμοποιήσετε το CSS για να αλλάξετε γραμματοσειρές σε ιστοσελίδες

Οι απλές επιλογές στυλ σας επιτρέπουν να αλλάξετε τη γραμματοσειρά μιας ιστοσελίδας χρησιμοποιώντας Cascading Style Sheets. Χρησιμοποιήστε το CSS για να ορίσετε τη γραμματοσειρά μεμονωμένων λέξεων, συγκεκριμένων προτάσεων, τίτλων, ολόκληρων παραγράφων και ακόμη και ολόκληρων σελίδων κειμένου. Τα παρακάτω στιγμιότυπα οθόνης ισχύουν για την παιδική χαρά κώδικα JSFiddle.net, αλλά οι έννοιες που περιγράφονται ισχύουν ανεξάρτητα από το πού εφαρμόζεται ο κώδικάς σας.

Πώς να αλλάξετε τη γραμματοσειρά με CSS

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

1. Εντοπίστε το κείμενο όπου θέλετε να αλλάξετε τη γραμματοσειρά. Θα το χρησιμοποιήσουμε ως παράδειγμα: Αυτό το κείμενο βρίσκεται στο Arial

2. Περιβάλλετε το κείμενο με το στοιχείο SPAN: Αυτό το κείμενο βρίσκεται στο Arial

3. Προσθέστε το χαρακτηριστικό « στην ετικέτα span: Αυτό το κείμενο βρίσκεται στο Arial

4. Στο χαρακτηριστικό στυλ, αλλάξτε τη γραμματοσειρά χρησιμοποιώντας το οικογένεια γραμματοσειρών στυλ.

   Αυτό το κείμενο βρίσκεται στο Arial

   

5. Αποθηκεύστε τις αλλαγές για να δείτε τα εφέ.

Συμβουλές για τη χρήση CSS για την αλλαγή γραμματοσειράς

1. Η καλύτερη προσέγγιση είναι να έχετε πάντα τουλάχιστον δύο γραμματοσειρές στη στοίβα γραμματοσειρών σας (τη λίστα των γραμματοσειρών), έτσι ώστε εάν το πρόγραμμα περιήγησης δεν έχει την πρώτη γραμματοσειρά, μπορεί να χρησιμοποιήσει τη δεύτερη γραμματοσειρά. Διαχωρίστε πολλές επιλογές γραμματοσειράς με κόμμα, όπως αυτό: font-family: Arial, Geneva, Helvetica, sans-serif;

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

   Αυτό το κείμενο βρίσκεται στο Arial

   Σε αυτό το παράδειγμα, το αρχείο CSS για την εμφάνιση του παραπάνω HTML θα εμφανιστεί ως εξής: .arial {font-family: Arial; }

   

3. Να τερματίζετε πάντα τα στυλ CSS με ερωτηματικό (;). Δεν απαιτείται όταν υπάρχει μόνο ένα στυλ, αλλά είναι καλή συνήθεια να ξεκινήσετε.