Web γραμματοσειρά CSS
- Προηγούμενη Σελίδα CSS Text Effects
- Επόμενη Σελίδα CSS 2D Μετατροπές
Regόλη @font-face
Web γραμματοσειρά επιτρέπει στους σχεδιαστές ιστοσελίδων να χρησιμοποιούν γραμματοσειρές που δεν είναι εγκατεστημένες στον υπολογιστή του χρήστη.
Όταν βρείτε/αγοράσετε τη γραμματοσειρά που θέλετε να χρησιμοποιήσετε, απλά περιλαμβάνετε το αρχείο γραμματοσειράς στο διακομιστή σας Web και θα κατεβάσει αυτόματα στους χρήστες όταν χρειαστεί.
Η @font-face ορίζονται στις规범.
Διαφορετικές μορφές γραμματοσειράς
TrueType γραμματοσειρά (TTF)
Η TrueType είναι πρότυπο γραμματοσειράς που αναπτύχθηκε από την Apple και την Microsoft στις αρχές της δεκαετίας του 1980. Η 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 字体是 Microsoft 设计的 OpenType 字体的紧凑形式，用作网页上的嵌入式字体。
EOT γραμματοσειρά είναι η συμπιεσμένη μορφή OpenType γραμματοσειράς που σχεδιάστηκε από τη Microsoft, χρησιμοποιείται ως ενσωματωμένη γραμματοσειρά σε ιστοσελίδες.
Υποστήριξη περιηγητών για μορφή γραμματοσειράς
| Τα αριθμήματα στη τаблицή αναφέρουν την πρώτη έκδοση του περιηγητή που υποστηρίζει πλήρως τη μορφή γραμματοσειράς. | |||||
| Μορφή γραμματοσειράς | TTF/OTF | 9.0* | 4.0 | 3.5 | 39.0 |
| 3.1 | WOFF | 9.0 | 5.0 | 3.6 | 5.1 |
| 11.1 | WOFF2 | 14.0 | 36.0 | 39.0 | 10.0 |
| 26.0 | 6.0 | 6.0 | 6.0 | SVG | 6.0 |
| 3.2 | EOT | 6.0 | 6.0 | 6.0 | 6.0 |
Δεν υποστηρίζεται*IE:
Η μορφή γραμματοσειράς είναι έγκυρη μόνο όταν οριστεί ως "installable".*Firefox:
Προεπιλεγόμενα δεν υποστηρίζεται, αλλά μπορεί να ενεργοποιηθεί (πρέπει να ρυθμιστεί ως "true" για να χρησιμοποιηθεί το WOFF2).
Χρήση της γραμματοσειράς που χρειάζεστε
Στο κανόνα @font-face: Πρώτα ορίστε το όνομα της γραμματοσειράς (π.χ. myFirstFont) και στη συνέχεια δείξτε το αρχείο γραμματοσειράς.Συμβουλή:
Η διεύθυνση URL της γραμματοσειράς πρέπει να είναι σε πεζά γράμματα. Οι κεφαλαία γράμματα μπορεί να προκαλέσουν απρόβλεπτα αποτελέσματα στο IE.
Πρέπει να προσθέσετε ένα άλλο κανόνα @font-face που περιέχει τον περιγραφέα κειμένου粗体bold:
Παράδειγμα
@font-face {
Για να χρησιμοποιήσετε τη γραμματοσειρά σε στοιχεία HTML, αναφέρετε το όνομα της γραμματοσειράς μέσω της ιδιότητας font-family (myFirstFont):
font-weight: bold;
src: url(sansation_light.woff);
@font-face {
font-weight: bold;
div {
Χρήση粗体bold κειμένου
Πρέπει να προσθέσετε ένα άλλο κανόνα @font-face που περιέχει τον περιγραφέα κειμένου粗体bold:
Παράδειγμα
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
Προσπαθήστε το προσωπικά
Αυτό είναι ένα άλλο αρχείο γραμματοσειράς, το "sansation_bold.woff", το οποίο περιέχει τα粗体bold χαρακτήρες της γραμματοσειράς Sansation.
Καθετί που έχει την οικογένεια γραμματοσειράς "myFirstFont" και πρέπει να εμφανιστεί σε粗体bold, ο περιηγητής θα χρησιμοποιήσει αυτήν. @font-face Όπως αυτό, μπορείτε να ρυθμίσετε πολλές
γραμματοσειράς CSS κανόνα.
Η παρακάτω τаблицή αναφέρει τις γραμματοσειρές που μπορούν να χρησιμοποιηθούν @font-face Όλοι οι περιγραφείς γραμματοσειράς που ορίζονται εντός του κανόνα:
| Δεσμευτής | Αξία | Περιγραφή |
|---|---|---|
| font-family | name | απαιτείται. Ορίζει το όνομα της γραμματοσειράς. |
| src | URL | απαιτείται. Ορίζει τη διεύθυνση URL του αρχείου γραμματοσειράς. |
| font-stretch |
|
Επιλογή. Ορίζει πώς θα επεκταθεί το γράμμα. Η προεπιλεγμένη τιμή είναι "normal". |
| font-style |
|
Επιλογή. Ορίζει το στυλ του γραμμάτων. Η προεπιλεγμένη τιμή είναι "normal". |
| font-weight |
|
Επιλογή. Ορίζει το πάχος του γραμμάτων. Η προεπιλεγμένη τιμή είναι "normal". |
| unicode-range | unicode-range | Επιλογή. Ορίζει το εύρος των χαρακτήρων Unicode που υποστηρίζονται από το γράμμα. Η προεπιλεγμένη τιμή είναι "U+0-10FFFF". |
- Προηγούμενη Σελίδα CSS Text Effects
- Επόμενη Σελίδα CSS 2D Μετατροπές
