Σημείωση: Αυτή η σελίδα σχετίζεται με την αλλαγή τύπου, μεγέθους και χρώματος γραμματοσειράς σε μια ιστοσελίδα. Για το Microsoft Word, ανατρέξτε στη σελίδα μας σχετικά με τον τρόπο αλλαγής του χρώματος, του μεγέθους ή του τύπου της γραμματοσειράς στο Word.

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

Για να προχωρήσετε, επιλέξτε τη μέθοδο από την οποία θέλετε να μάθετε ή να διαβάσετε κάθε ενότητα.

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

Παράδειγμα κώδικα

Αυτό το κείμενο έχει τη γραμματοσειρά Courier, είναι μπλε και 20px.

Αποτέλεσμα

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

Χρησιμοποιώντας το CSS για μία ή περισσότερες σελίδες

Προσαρμοσμένη γραμματοσειρά για μια σελίδα

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

 .custom {font-family: Courier; χρώμα: κόκκινο; γραμματοσειρά-μέγεθος: 20px; }} 

Αφού οριστεί, αυτό το στυλ μπορεί να εφαρμοστεί στα περισσότερα στοιχεία της σελίδας σας, προσαρτώντας σε αυτά την κατηγορία "προσαρμοσμένη". Στο παρακάτω πλαίσιο εμφανίζονται δύο γραμμές κώδικα και τα αντίστοιχα αποτελέσματα.

Παράδειγμα

Αυτή η ολόκληρη πρόταση είναι κόκκινη και Courier

Μόνο η λέξη TEST είναι κόκκινη και Courier.

Αποτέλεσμα

Αυτή η ολόκληρη πρόταση είναι κόκκινη και Courier.

Μόνο η λέξη TEST είναι κόκκινη και Courier.

Προσαρμοσμένη γραμματοσειρά για πολλές σελίδες

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

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

 @charset "utf-8";
.courier {font-family: Courier; χρώμα: # 005CB9; }} 

Μόλις το προηγούμενο κείμενο έχει τοποθετηθεί σε ένα αρχείο .css (έχουμε ονομάσει ours basic.css ), μπορείτε να το συνδέσετε από οποιαδήποτε άλλη σελίδα χρησιμοποιώντας μια γραμμή παρόμοια με το ακόλουθο παράδειγμα.

Συμβουλή: Οι χρήστες μπορούν να αλλάξουν τις ιδιότητες των στοιχείων σε μια σελίδα, αλλάζοντας τον κώδικα στο αρχείο εισαγωγής .css.

Ετικέτα γραμματοσειράς

Αν και έχει καταργηθεί, η ετικέτα HTML μπορεί ακόμα να χρησιμοποιηθεί και μπορεί να είναι απαραίτητη για χρήση με ορισμένες υπηρεσίες στο διαδίκτυο. Όταν χρησιμοποιείτε την ετικέτα FONT, πρέπει να συμπεριλάβετε το χαρακτηριστικό προσώπου, το οποίο περιγράφει τη γραμματοσειρά που πρόκειται να χρησιμοποιηθεί. Στο παρακάτω παράδειγμα, χρησιμοποιούμε τη γραμματοσειρά Courier και τον δεκαεξαδικό κωδικό χρώματος # 005CB9, που είναι σκούρο μπλε.

Παράδειγμα κώδικα

 Ένα ειδικό παράδειγμα γραμματοσειράς. 

Αποτέλεσμα