Η ιδιότητα συντομογραφίας font στο CSS

Στο προηγούμενο μάθημα αναλύσαμε πολλές ιδιότητες για το κείμενο. Συχνά είναι αρκετά δαπανηρό να ορίζουμε ξεχωριστά κάθε μία από αυτές τις ιδιότητες, για αυτό στο CSS για μεγαλύτερη ευκολία υπάρχει μια ειδική ιδιότητα-συντομογραφία font. Αυτή η ιδιότητα επιτρέπει να ορίσουμε ταυτόχρονα το μέγεθος της γραμματοσειράς, την οικογένεια, το βάρος, την πλάγια γραφή και το interligne.

Η ιδιότητα που περιγράφεται έχει την ακόλουθη σύνταξη:

font-style font-weight font-size / line-height font-family

Σε αυτήν την περίπτωση, η σειρά των ιδιοτήτων έχει σημασία, και υποχρεωτικά είναι τα font-size και font-family. Προσέξτε ότι άλλες ιδιότητες, εκτός από αυτές που περιγράφονται παραπάνω στη σύνταξη, δεν περιλαμβάνονται σε αυτήν την ιδιότητα συντομογραφίας.

Ας δούμε παραδείγματα.

Παράδειγμα

Ας υποθέσουμε ότι έχουμε τα ακόλουθα στυλ:

cssp {
  font-size: 16px;
  font-family: Arial;
}

Ας τα ξαναγράψουμε χρησιμοποιώντας την ιδιότητα-συντομογραφία:

cssp {
  font: 16px Arial;
}

Παράδειγμα

Ας υποθέσουμε ότι έχουμε τα ακόλουθα στυλ:

cssp {
  font-size: 16px;
  font-family: Arial;
  line-height: 50px;
}

Ας τα ξαναγράψουμε χρησιμοποιώντας την ιδιότητα-συντομογραφία:

cssp {
  font: 16px/50px Arial;
}

Παράδειγμα

Ας υποθέσουμε ότι έχουμε τα ακόλουθα στυλ:

cssp {
  font-size: 16px;
  font-family: Arial;
  font-weight: bold;
}

Ας τα ξαναγράψουμε χρησιμοποιώντας την ιδιότητα-συντομογραφία:

cssp {
  font: bold 16px Arial;
}

Παράδειγμα

Ας υποθέσουμε ότι έχουμε τα ακόλουθα στυλ:

cssp {
  font-size: 16px;
  font-family: Arial;
  font-weight: bold;
  line-height: 50px;
  font-style: italic;
}

Ας τα ξαναγράψουμε χρησιμοποιώντας την ιδιότητα-συντομογραφία:

cssp {
  font: bold italic 16px/50px Arial;
}

Πρακτικές Ασκήσεις

cssp {
  font-family: "Times New Roman";
  font-size: 13px;
  line-height: 20px;
}

cssp {
  width: 300px;
  font-family: Arial;
  color: red;
  font-size: 40px;
  font-weight: bold;
}

cssp {
  font-family: Arial;
  font-size: 40px;
  font-weight: bold;
  text-indent: 50px;
  font-style: italic;
  line-height: 60px;
}