Γραμματοσειρά CSS

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

Σειρά Τυπογραφίας CSS

Στη CSS, υπάρχουν δύο διαφορετικά τύπου ονόματα γραμματοσειράς:

  • Γενική γραμματοσειρά - συνδυασμός γραμματοσειρών με παρόμοιο εμφάνιση (π.χ. "Serif" ή "Monospace")
  • Συγκεκριμένη γραμματοσειρά - συγκεκριμένη γραμματοσειρά (π.χ. "Times" ή "Courier")

Εκτός από διάφορες συγκεκριμένες γραμματοσειρές, η CSS ορίζει 5 τύπου γενικές γραμματοσειρές:

  • Γραμματοσειρά Serif
  • Γραμματοσειρά Sans-serif
  • Γραμματοσειρά Monospace
  • Γραμματοσειρά Cursive
  • Γραμματοσειρά Fantasy

Για να μάθετε περισσότερα για τις γραμματοσειρές, διαβάστε Σειρά Τυπογραφίας CSS.

Καθορισμός γραμματοσειράς

Χρήση Ιδιότητα font-family Ορισμός γραμματοσειράς κειμένου.

Χρήση γενικής γραμματοσειράς

Αν θέλετε να χρησιμοποιήσετε μια sans-serif γραμματοσειρά για το έγγραφο, αλλά δεν σας ενδιαφέρει ποια είναι η συγκεκριμένη γραμματοσειρά, η παρακάτω διακήρυξη είναι κατάλληλη:

body {font-family: sans-serif;}

Try it yourself

Ο διαμεσολαβητής χρήστη θα επιλέξει μια γραμματοσειρά από τη σειρά sans-serif (π.χ. Helvetica) και θα την εφαρμόσει στο στοιχείο body. Επειδή υπάρχει κληρονομικότητα, αυτή η επιλογή γραμματοσειράς θα εφαρμοστεί σε όλα τα στοιχεία που περιέχονται στο στοιχείο body, εκτός αν υπάρχει πιο συγκεκριμένος επιλογέας που θα το καλύψει.

Καθορισμός γραμματοσειράς

Επιπλέον, μπορείτε να ρυθμίσετε πιο συγκεκριμένες γραμματοσειρές μέσω της ιδιότητας font-family.

Το παρακάτω παράδειγμα ρυθμίζει τη γραμματοσειρά Georgia για όλα τα στοιχεία h1:

h1 {font-family: Georgia;}

Try it yourself

Αυτός ο κανόνας μπορεί επίσης να προκαλέσει ένα άλλο πρόβλημα, αν ο διαμεσολαβητής χρήστη δεν έχει εγκαταστήσει τη γραμματοσειρά Georgia, θα χρησιμοποιήσει την προεπιλεγμένη γραμματοσειρά του διαμεσολαβητή για να εμφανίσει το στοιχείο h1.

Μπορούμε να λύσουμε αυτό το πρόβλημα συνδυάζοντας συγκεκριμένα ονόματα γραμματοσειρών με γενικές γραμματοσειρές:

h1 {font-family: Georgia, serif;}

Try it yourself

Αν ο αναγνώστης δεν έχει εγκαταστήσει τη Georgia, αλλά έχει εγκαταστήσει τη γραμματοσειρά Times (μια γραμματοσειρά serif), ο διαμεσολαβητής χρήστη μπορεί να χρησιμοποιήσει τη Times για το στοιχείο h1. Παρά το ότι η Times δεν ταιριάζει απόλυτα με τη Georgia, τουλάχιστον είναι αρκετά κοντά.

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

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

p {font-family: Times, TimesNR, 'New Century Schoolbook',}}
     Georgia, 'New York', serif;}

Try it yourself

Βασισμένος σε αυτή τη λίστα, ο χρήστης του περιηγητή θα αναζητήσει αυτές τις γραμματοσειρές στη σειρά που αναφέρεται. Αν όλες οι γραμματοσειρές δεν είναι διαθέσιμες, θα επιλεγεί απλά μια διαθέσιμη serif γραμματοσειρά.

Χρήση εισαγωγικών

Δενδύεται να παρατηρήσετε ότι στους παραπάνω παραδείγματα χρησιμοποιούνται εισαγωγικά. Μόνο όταν το όνομα της γραμματοσειράς περιέχει ένα ή περισσότερα κενά (π.χ. New York) ή όταν το όνομα της γραμματοσειράς περιέχει σύμβολα όπως # ή $, τότε πρέπει να χρησιμοποιηθούν εισαγωγικά στη διατύπωση font-family.

Αποδεκτές είναι και οι απλές και οι διπλές εισαγωγικά. Ωστόσο, αν μια ιδιότητα font-family βρίσκεται στον style του HTML, τότε πρέπει να χρησιμοποιηθούν εισαγωγικά που δεν χρησιμοποιούνται από την ιδιότητα αυτή:

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
 'New York', serif;">...</p>

Try it yourself

Στυλ γραμματοσειράς

Η ιδιότητα font-styleΧρησιμοποιείται πιο συχνά για την καθορισμό του italic κειμένου.

Αυτή η ιδιότητα έχει τρεις τιμές:

  • normal - Εμφάνιση κειμένου κανονικής μορφής
  • italic - Εμφάνιση κειμένου με κλίση
  • oblique - Εμφάνιση κειμένου με αποκλίνοντας

Example

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Try it yourself

Η διαφορά μεταξύ italic και oblique

Η font-style είναι πολύ απλή: χρησιμοποιείται για να επιλέξει μεταξύ κανονικού κειμένου, italic κειμένου και oblique κειμένου. Το μοναδικό που είναι λίγο περίπλοκο είναι να καθορίσει τη διαφορά μεταξύ italic και oblique κειμένου.

Το italic είναι ένα απλό στυλ γραμματοσειράς, το οποίο κάνει μικρές αλλαγές στη δομή κάθε γραμμάτων για να αντικατοπτρίζει την αλλαγή της εμφάνισης. Αντίθετα, το oblique κείμενο είναι μια εκδοχή του κανονικού οριζόντιου κειμένου που είναι αποκλίνομενη.

Συνήθως, το italic και το oblique κείμενο φαίνονται εντελώς ίδια στον περιηγητή του Διαδικτύου.

Διαμόρφωση γραμματοσειράς

Η ιδιότητα font-variantΜπορεί να καθοριστεί η μικρή κεφαλαία.

Η μικρή κεφαλαία δεν είναι μια συνηθισμένη κεφαλαία ούτε μια μικρή γραμματική, αυτή η γραμματική χρησιμοποιεί κεφαλαία γραμματα με διαφορετικό μέγεθος.

Example

p {font-variant:small-caps;}

Try it yourself

Γραμματοσειρά粗体

Αξία font-weightΡυθμίστε το πάχος του κειμένου.

Η χρήση της λέξης-κλειδί bold μπορεί να ρυθμίσει το κείμενο σε bold.

Οι λέξεις-κλειδιά 100 ~ 900 καθορίζουν 9 επίπεδα粗体度. Αν μια γραμματοσειρά περιέχει αυτά τα επίπεδα粗体度, τα αριθμήματα απλά αντιστοιχούν στα προκαθορισμένα επίπεδα, 100 αντιστοιχεί στην πιο λεπτή μορφή γραμματοσειράς, 900 στην πιο παχύτερη μορφή γραμματοσειράς. Ο αριθμός 400 είναι ίσος με normal, ενώ ο αριθμός 700 είναι ίσος με bold.

Αν οριστεί η粗体度为 bolder, ο περιηγητής θα ρυθμίσει μια πιο παχύτερη γραμματοσειρά από την κληρονομική τιμή. Αντίθετα, η λέξη κλειδί lighter θα οδηγήσει τον περιηγητή να μειώσει την粗体度 αντί να την αυξήσει.

Example

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

Try it yourself

Μέγεθος γραμματοσειράς

Αξία font-sizeΡυθμίστε το μέγεθος του κειμένου.

Η ικανότητα διαχείρισης του μεγέθους του κειμένου είναι πολύ σημαντική στον τομέα του web design. Ωστόσο, δεν πρέπει να προσαρμόζετε το μέγεθος του κειμένου ώστε οι παράγραφοι να μοιάζουν με τίτλους ή οι τίτλοι να μοιάζουν με παράγραφους.

Χρησιμοποιήστε πάντα σωστά τα HTML τίτλους, όπως τη χρήση <h1> - <h6> για να σημειώσετε τους τίτλους, και τη χρήση <p> για να σημειώσετε τους παράγραφους.

Το font-size μπορεί να είναι绝对的 ή σχετικός.

Αντιπροσωπευτικός αριθμός:

  • Ρυθμίστε το μέγεθος του κειμένου σε συγκεκριμένο μέγεθος
  • Δεν επιτρέπεται στους χρήστες να αλλάζουν το μέγεθος του κειμένου σε όλους τους περιηγητές (δεν είναι κατάλληλο για την προσβασιμότητα)
  • Η αμετάβλητη μέγεθος είναι πολύ χρήσιμη όταν καθορίζεται το φυσικό μέγεθος της έκδοσης

Αντιπροσωπευτικό μέγεθος:

  • Ρύθμιση μεγέθους σε σχέση με τα γύρω στοιχεία
  • Επιτρέψτε στους χρήστες να αλλάζουν το μέγεθος του κειμένου στο πρόγραμμα περιήγησης

Σημείωση:Αν δεν καθορίσετε το μέγεθος της γραμματοσειράς, το προεπιλεγμένο μέγεθος του κειμένου (π.χ. παράγραφος) είναι 16 pixels (16px=1em).

Χρήση pixels για τη ρύθμιση μεγέθους γραμματοσειράς

Με την ρύθμιση μεγέθους κειμένου σε pixels, μπορεί να υπάρξει πλήρης έλεγχος του μεγέθους του κειμένου:

Example

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

Try it yourself

Στα Firefox, Chrome και Safari, μπορεί να προσαρμοστεί το μέγεθος του κειμένου των παραπάνω παραδειγμάτων, αλλά όχι στο Internet Explorer.

Αν και μπορεί να προσαρμοστεί το μέγεθος του κειμένου με το εργαλείο κλίμακας του περιηγητή, αυτό είναι στην πραγματικότητα μια ρύθμιση για ολόκληρη τη σελίδα και όχι μόνο για το κείμενο.

Χρήση em για τη ρύθμιση μεγέθους γραμματοσειράς

Για να αποφύγουμε το πρόβλημα που δεν μπορεί να προσαρμοστεί το κείμενο στο Internet Explorer, πολλοί ανάπτυκτες χρησιμοποιούν τις μονάδες em ως αντικαταστάτες των pixels.

W3C recommends using em as the unit of measurement.

1em equals the current font size. If an element's font-size is 16 pixels, then for that element, 1em equals 16 pixels. When setting the font size, the em value will change relative to the font size of the parent element.

The default text size in browsers is 16 pixels. Therefore, the default size of 1em is 16 pixels.

You can use the following formula to convert pixels to em:pixels/16=em

(Note: 16 equals the default font size of the parent element, assuming the parent element's font-size is 20px, then the formula needs to be changed to:pixels/20=em

Example

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

Try it yourself

In the above example, the text size in em units is the same as the text size in pixels in the previous example. However, if you use em units, you can adjust the text size in all browsers.

Unfortunately, there is still a problem in IE. When resetting the text size, it will be larger or smaller than the normal size.

Combined use of percentages and EM

A solution that works in all browsers is to set the default font-size value for the body element (parent element) in percentages:

Example

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

Try it yourself

Our code is very effective. It can display the same text size in all browsers and allows all browsers to scale the text size.

CSS Font Example:

Set the text font
This example demonstrates how to set the text font.
Set the font size
This example demonstrates how to set the font size.
Set the font style
This example demonstrates how to set the font style.
Set the font style
This example demonstrates how to set the font style.
Set the font weight
This example demonstrates how to set the font weight.
All font properties within a single declaration
This example demonstrates how to use the shorthand property to set font properties within a single declaration.

CSS Font Properties

Property Description
font Concise attribute. Its function is to set all font-related properties in a single declaration.
font-family Ρύθμιση της σειράς γραμματοσειράς.
font-size Ρύθμιση του μεγέθους της γραμματοσειράς.
font-size-adjust Ενσωματωμένη επέκταση της γραμματοσειράς αν η προτιμώμενη γραμματοσειρά δεν είναι διαθέσιμη (Η ιδιότητα αυτή έχει αφαιρεθεί από το CSS2.1).
font-stretch Επίπεδη επέκταση γραμματοσειράς (Η ιδιότητα αυτή έχει αφαιρεθεί από το CSS2.1).
font-style Ρύθμιση του τύπου γραμματοσειράς.
font-variant Εμφάνιση κειμένου με μικρό γραμματοσειρά ή κανονικό γραμματοσειρά.
font-weight Ρύθμιση της粗细 του γραμματοσειράς.