Tutorials / Webentwicklung / Webseiten-Optimierung / Ladezeit verbessern / CSS / Kurzschreibweise (Shorthand) / Font

Mit CSS die übertragene Datenmenge reduzieren

Die CSS Kurzschreibweise (Shorthand) verwenden

CSS Kurzschreibweise für die Font-Eigenschaften verwenden

Die Font-Eigenschaft ist eine CSS-Kurzschreibweise für die einzelnen Eigenschaften font-style, font-variant, font-weight, font-size, line-height und font-family.

Bei der Verwendung der Font-Eigenschaft werden die sechs aufgeführten Eigenschaften zuerst mit den CSS-Standard-Werten der jeweiligen Eigenschaften generiert und anschließend werden diese Standard-Werte durch die gewünschten angegebenen/definierten CSS-Werte überschrieben.

Beispiel mit 6 Font-Eigenschaften (6 abweichende Standardwerte)

.bsp-p {
        font-style: italic;
        font-variant: small-caps;
        font-weight: bold;
        font-size: 1em;
        line-height: 1.5em;
        font-family: "Arial", sans-serif;
}
.bsp-p {
        font: italic small-caps bold 1em/1.5em "Arial", sans-serif;
}
.bsp-p{font:italic small-caps bold 1em/1.5em Arial,sans-serif}

Beispiel mit 4 Font-Eigenschaften (3 abweichende Standardwerte)

.bsp-p {
        font-style: normal;
        font-weight: bold;
        font-size: 1em;
        font-family: "Arial", sans-serif;
}

Standard-Werte werden in der CSS-Kurzschreibweise ersatzlos weggelassen.

.bsp-p {
        font: bold 1em "Arial", sans-serif;
}
.bsp-p{font:bold 1em Arial,sans-serif}

Die sechs Font-Eigenschaften werden bei der Verwendung der CSS-Kurzschreibweise jedes Mal mit den CSS-Standard-Werten neu generiert. Dies muss bei einer gewünschten Vererbung auf untergeordnete HTML-Elemente berücksichtigt werden.

Wenn nur eine einzelne Font-Eigenschaft geändert werden soll - z. B.: font-size - und die restlichen Font-Eigenschaften aus dem übergeordneten HTML-Element geerbt werden sollen, ist es sinnvoller, nur diese einzelne Font-Eigenschaft neu zu setzen. Dies erspart der Browser-Render-Engine die Arbeit, alle sechs Einzel-Werte erst auf die CSS-Standard-Werte zu setzen.

Zusammenfassung: Durch die Verwendung der Font-Kurzschreibweise im CSS kann die Ladezeit von Webseiten durch die verringerte Dateigröße optimiert werden.