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

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

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

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

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

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

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

div {
  font-family: myFirstFont;
}

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

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

Παράδειγμα

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

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

Δοκιμάστε το προσωπικά

Περισσότερες TIY παραδείγματα μπορούν να βρεθούν στο κάτω μέρος της σελίδας.

Γραμματική CSS

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

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

Παράδειγμα

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

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

Δοκιμάστε το προσωπικά

Το αρχείο "sansation_bold.woff" είναι ένας άλλος αρχείο γραμματοσειράς που περιέχει τα粗体 χαρακτήρες της γραμματοσειράς 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: Καταρχήν είναι απενεργοποιημένος, αλλά μπορεί να ενεργοποιηθεί (χρειάζεται να ρυθμίσετε την ένδειξη ως "true" για να χρησιμοποιήσετε το WOFF2).

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