CSS: Font Definitionen abkürzen

Komplizierte und lange Definitionen sind gar nicht nötig, wenn es um Schriften geht. Es geht auch sehr viel kürzer, indem man die Angaben in Kurzform zusammenfasst.

Mit ‘font’ lassen sich folgende Elemente gleichzeitig definieren: ‘font-style’, ‘font-variant’, ‘font-weight’, ‘font-size’, ‘line-height’ und ‘font-family’.

Zum Beispiel:

Fett, 18 Punkt und Verdana:

 <p style="font : bold 18pt Verdana">Mustertext</p>
    

Kursiv, Größer und Arial

      <p style="font : italic larger
Arial">Mustertext</p>
    

Es wird noch besser. Wir können in einem Rutsch Schriftgröße und Zeilenabstand (Durchschuss) definieren. Die Schriftgröße wird zuerst angegeben, dann folgt der Durchschuss getrennt durch einen Schrägstrich.

So entspricht diese Definition

      <p style="font: normal small-caps 120%/80% courier;">
    

exakt dieser

      <p style="font-style: normal; font-variant : small-caps;
font-size : 120%; line-height : 80%; font-family : courier;"> 

Die beiden Beispiele sollten in einem modernen Browser identisch aussehen:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Weitere Beiträge:

• 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
• Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
• Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
• Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
• Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
• 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
• Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.