Ιδιότητα font

Η ιδιότητα font είναι μια συντμημένη ιδιότητα, στην οποία μπορούν να χρησιμοποιηθούν οι ακόλουθες ιδιότητες CSS: font-size, font-style, font-weight, line-height, font-family, font-variant.

Σύνταξη

cssεπιλογέας {
  font: [font-style|font-variant|font-weight] font-size [/line-height] font-family;
}

Υποχρεωτικές ιδιότητες είναι οι font-size και font-family, οι υπόλοιπες μπορούν να παραλειφθούν, διατηρώντας τη σειρά.

Οι ιδιότητες font-style, font-variant, font-weight μπορούν να αναδιαταχθούν με οποιαδήποτε σειρά μεταξύ τους.

Παρατηρήστε ότι η ιδιότητα line-height γράφεται με κάθετο μετά την ιδιότητα font-size.

Παράδειγμα

Ας δημιουργήσουμε πλάγιο κείμενο μεγέθους 15px, τύπου Arial, και με απόσταση γραμμής 30px:

html<p>
  some long text
</p>

cssp {
  font: italic 15px/30px Arial;
  text-align: justify;
}

Результат:

Παράδειγμα

Άλλο παράδειγμα:

html<p>
  some long text
</p>

cssp {
  font: bold 16px/20px "Times New Roman", Georgia, serif;
  text-align: justify;
}

Результат:

Παράδειγμα

Ας ορίσουμε μόνο το μέγεθος γραμματοσειράς και την οικογένεια, παραλείποντας τις άλλες ιδιότητες:

html<p>
  some long text
</p>

cssp {
  font: 18px Arial;
  text-align: justify;
}

Результат:

Παράδειγμα

Εαν οριστεί μόνο το μέγεθος γραμματοσειράς, δεν θα εφαρμοστεί, καθώς πρέπει υποχρεωτικά να οριστεί επίσης και η οικογένεια γραμματοσειράς:

html<p>
  some long text
</p>

cssp {
  font: 30px;
  text-align: justify;
}

Результат: