Κανόνας @font-face CSS

  • Προηγούμενη σελίδα font
  • Επόμενη σελίδα font-family

Ορισμός και χρήση

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

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

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

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

div {
  font-family: myFirstFont;
}

Δείτε επίσης:

Εκμάθηση CSS:Πρότυπο CSS Web Γραμματοσειρά

Παράδειγμα

Ορίστε μια γραμματοσειρά με το όνομα "myFirstFont" και καθορίστε τη διεύθυνση URL όπου μπορεί να βρεθεί:

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

Προσπαθήστε το προσωπικά

Μπορείτε να βρείτε περισσότερα παραδείγματα TIY στην κάτω πλευρά της σελίδας.

Γλωσσή CSS

@font-face {
  font-properties
}
Ενδεικτήρας γραμματοσειράς Τιμή Περιγραφή
font-family name Απαιτείται. Ορίζει το όνομα της γραμματοσειράς.
src URL Απαιτείται. Ορίζει τη διεύθυνση URL του κατεβάσματος γραμματοσειράς.
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 Οptional. Ορίζει πώς θα επεκταθεί η γραμματοσειρά. Η προεπιλεγμένη τιμή είναι "normal".
font-style
  • normal
  • italic
  • oblique
 Οptional. Ορίζει το στυλ της γραμματοσειράς. Η προεπιλεγμένη τιμή είναι "normal".
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Οptional. Ορίζει τοickness της γραμματοσειράς. Η προεπιλεγμένη τιμή είναι "normal".
unicode-range unicode-range Οptional. Ορίζει το εύρος των Unicode χαρακτήρων που υποστηρίζει η γραμματοσειρά. Η προεπιλεγμένη τιμή είναι "U+0-10FFFF".

Περισσότερα παραδείγματα

Παράδειγμα

Πρέπει να προσθέσετε μια άλλη ρύθμιση @font-face που περιέχει την περιγραφή του bold κειμένου:

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

Προσπαθήστε το προσωπικά

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

Καθώς κάθε κείμενο που πρέπει να εμφανιστεί σε粗体 με την οικογένεια γραμματοσειράς "myFirstFont", ο περιηγητής θα το χρησιμοποιήσει.

Ετσι, μπορείτε να ρυθμίσετε πολλαπλές ρυθμίσεις @font-face για την ίδια γραμματοσειρά.

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

Το Internet Explorer, το Firefox, το Opera, το Chrome και το Safari υποστηρίζουν το κανόνα @font-face.

Τα αριθμήματα στη τаблицή σηματοδοτούν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως τη μορφή γραμματοσειράς.

Μορφή γραμματοσειράς
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 Δεν υποστηρίζεται Δεν υποστηρίζεται Δεν υποστηρίζεται 3.2 Δεν υποστηρίζεται
EOT 6.0 Δεν υποστηρίζεται Δεν υποστηρίζεται Δεν υποστηρίζεται Δεν υποστηρίζεται

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

* Firefox: Ενεργοποιείται εξ ορισμού, αλλά μπορεί να ενεργοποιηθεί (πρέπει να ρυθμιστεί το flag ως "true" για να χρησιμοποιηθεί το WOFF2).

  • Προηγούμενη σελίδα font
  • Επόμενη σελίδα font-family