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

Πίνακας περιεχομένων

Ο κανόνας CSS @font-face

Οι γραμματοσειρές Ιστού επιτρέπουν στους σχεδιαστές Ιστού να χρησιμοποιούν γραμματοσειρές που δεν είναι εγκατεστημένες στον υπολογιστή του χρήστη.

Όταν έχετε βρει/αγοράσει τη γραμματοσειρά που θέλετε να χρησιμοποιήσετε, απλώς συμπεριλάβετε τη γραμματοσειρά αρχείο στον web server σας και θα ληφθεί αυτόματα στον χρήστη όταν χρειαστεί.

Οι "δικές" σας γραμματοσειρές ορίζονται στον κανόνα CSS @font-face.

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

Γραμματοσειρές TrueType (TTF)

Το TrueType είναι ένα πρότυπο γραμματοσειράς που αναπτύχθηκε στα τέλη της δεκαετίας του 1980, από την Apple και τη Microsoft. Το TrueType είναι η πιο κοινή μορφή γραμματοσειράς τόσο για το Mac OS όσο και για τη Microsoft λειτουργικά συστήματα Windows.

Γραμματοσειρές OpenType (OTF)

Το OpenType είναι μια μορφή για επεκτάσιμες γραμματοσειρές υπολογιστών. Κατασκευάστηκε σε TrueType, και είναι σήμα κατατεθέν της Microsoft. Οι γραμματοσειρές OpenType χρησιμοποιούνται συνήθως σήμερα στις μεγάλες πλατφόρμες υπολογιστών.

Μορφή ανοιχτής γραμματοσειράς Web (WOFF)

Το WOFF είναι μια μορφή γραμματοσειράς για χρήση σε ιστοσελίδες. Αναπτύχθηκε το 2009 και είναι τώρα μια Σύσταση του W3C. Το WOFF είναι ουσιαστικά OpenType ή TrueType με συμπίεση και πρόσθετα μεταδεδομένα. Ο στόχος είναι η υποστήριξη της διανομής γραμματοσειρών από έναν διακομιστή σε έναν πελάτη μέσω ενός δικτύου με περιορισμούς εύρους ζώνης.

Μορφή ανοιχτής γραμματοσειράς Web (WOFF 2.0)

Γραμματοσειρά TrueType/OpenType που παρέχει καλύτερη συμπίεση από το WOFF 1.0.

Γραμματοσειρές/Σχήματα SVG

Οι γραμματοσειρές SVG επιτρέπουν στο SVG να χρησιμοποιείται ως γλυφές κατά την εμφάνιση κειμένου. Το SVG 1.1 Προδιαγραφές ορίζουν μια ενότητα γραμματοσειράς που επιτρέπει τη δημιουργία γραμματοσειρών μέσα σε ένα Έγγραφο SVG. Μπορείτε επίσης να εφαρμόσετε CSS σε έγγραφα SVG και τον κανόνα @font-face μπορεί να εφαρμοστεί σε κείμενο σε έγγραφα SVG.

Ενσωματωμένες γραμματοσειρές OpenType (EOT)

Οι γραμματοσειρές EOT είναι μια συμπαγής μορφή γραμματοσειρών OpenType που έχουν σχεδιαστεί από τη Microsoft για χρήση ως ενσωματωμένες γραμματοσειρές σε ιστοσελίδες.

Υποστήριξη προγράμματος περιήγησης για μορφές γραμματοσειρών

Οι αριθμοί στον πίνακα καθορίζουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως το μορφή γραμματοσειράς.

Font format
TTF/OTF	9.0*	4.0	3.5	3.1	10.0
WOFF	9.0	5.0	3.6	5.1	11.1
WOFF2	14.0	36.0	39.0	10.0	26.0
SVG	Not supported	Not supported	Not supported	3.2	Not supported
EOT	6.0	Not supported	Not supported	Not supported	Not supported

*IE: Η μορφή γραμματοσειράς λειτουργεί μόνο όταν έχει οριστεί ως "εγκατάσταση".

Χρησιμοποιώντας τη γραμματοσειρά που θέλετε

Στον κανόνα @font-face. ορίστε πρώτα ένα όνομα για τη γραμματοσειρά (π.χ. myFirstFont) και μετά τοποθετήστε το δείκτη του ποντικιού στο αρχείο γραμματοσειράς.

Συμβουλή: Χρησιμοποιείτε πάντα πεζά γράμματα για τη διεύθυνση URL της γραμματοσειράς. Τα κεφαλαία γράμματα μπορούν να δώσουν απροσδόκητα αποτελέσματα στο IE.

Για να χρησιμοποιήσετε τη γραμματοσειρά για ένα στοιχείο HTML, ανατρέξτε στο όνομα της γραμματοσειράς (myFirstFont) μέσω της ιδιότητας font-family:

Παράδειγμα

@font-face
{
   
font-family: myFirstFont;
   
src: url(sansation_light.woff);
}

div
{
   
font-family: myFirstFont;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

* {
   font-family: myFirstFont;
}
</style>
</head>
<body>

<h1>The @font-face Rule</h1>

<div>
With CSS, websites can use fonts other than the pre-selected "web-safe" fonts.
</div>

</body>
</html>

Χρήση έντονου κειμένου

Πρέπει να προσθέσετε έναν άλλο κανόνα @font-face που να περιέχει περιγραφείς για έντονους χαρακτήρες:

Παράδειγμα

@font-face
{
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
   
font-weight: bold;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

@font-face {
   font-family: myFirstFont;
   src: url(sansation_bold.woff);
   font-weight: bold;
}

* {
   font-family: myFirstFont;
}
</style>
</head>
<body>

<h1>The @font-face Rule</h1>

<div>
With CSS, websites can use <b>fonts other than the pre-selected "web-safe" fonts</b>.
</div>

</body>
</html>

Το αρχείο "sansation_bold.woff" είναι ένα άλλο αρχείο γραμματοσειράς, που περιέχει τους έντονους χαρακτήρες για τη γραμματοσειρά Sansation.

Τα προγράμματα περιήγησης θα το χρησιμοποιούν κάθε φορά που ένα κομμάτι κειμένου με την οικογένεια γραμματοσειρών "myFirstFont" πρέπει να εμφανίζεται με έντονη γραφή.

Με αυτόν τον τρόπο μπορείτε να έχετε πολλούς κανόνες @font-face για την ίδια γραμματοσειρά.

Περιγραφείς γραμματοσειρών CSS

Ο παρακάτω πίνακας παραθέτει όλους τους περιγραφείς γραμματοσειρών που μπορούν να οριστούν μέσα στον κανόνα @font-face:

Περιγραφέας:

font-family

Τιμές:

name

Περιγραφή:

Απαιτείται. Ορίζει ένα όνομα για τη γραμματοσειρά

Περιγραφέας:

src

Τιμές:

URL

Περιγραφή:

Απαιτείται. Καθορίζει τη διεύθυνση URL του αρχείου γραμματοσειράς

Περιγραφέας:

font-stretch

Τιμές:

normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded

Περιγραφή:

Προαιρετικός. Καθορίζει πώς πρέπει να τεντωθεί η γραμματοσειρά. Η προεπιλογή είναι "κανονική"

Περιγραφέας:

font-style

Τιμές:

normal
italic
oblique

Περιγραφή:

Προαιρετικός. Καθορίζει το στυλ της γραμματοσειράς. Η προεπιλογή είναι "κανονική"

Περιγραφέας:

font-weight

Τιμές:

normal
bold
100
200
300
400
500
600
700
800
900

Περιγραφή:

Προαιρετικός. Καθορίζει την τόλμη της γραμματοσειράς. Η προεπιλογή είναι "κανονική"

Περιγραφέας:

unicode-range

Τιμές:

unicode-range

Περιγραφή:

Προαιρετικός. Καθορίζει το εύρος των χαρακτήρων UNICODE που υποστηρίζει η γραμματοσειρά. Η προεπιλογή είναι "U+0-10FFFF"