TrueType Fonts und Text-Transformation mit rotate

Leicht einzubauen, einfach zu verstehen und beeindruckende Effekte: so wünscht man sich CSS Effekte. @font-face ist hier ganz vorne in der Hitliste der auffallensstarken und griffigen Schätze aus der CSS 3 Trickkiste zu nennen.
Wie wäre es etwa mit der Typo „Lobster“ als Überschrift:

CSS3 mit TrueType Schrift


Dazu der CSS code:

<style type="text/css">
<!--
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: normal;
  src: local('Lobster'), url('http://themes.googleusercontent.com/
                                  font?kit=9LpJGtNuM1D8FAZ2BkJH2Q') format('truetype');
}
.lobster { font-family: 'Lobster', arial, serif;}

-->
</style>

Einfach über @font-face eine eigene Typographie definieren, über font-family benennen und mit src die Quelle angeben. Der neue Font kann dann wie gewohnt font-family mit dem vorher definierten Namen angesprochen und zugewiesen werden.

Woher die True Type Fonts?

Eine kleine aber feine, weil Open Source, Quelle ist hier Google Webfonts

Wie sieht es mit der Browser-Konformität aus?

Das Einbinden der TrueType Schriften ist in allen modernen Browsern möglich. In allen Browsern? Nein, nicht in allen Browsern; zumindest nicht in allen gleich einfach. Die Spezifikation stammt bereits aus CSS2 und ist verfügbar ab Internet Explorer 5, Firefox 3.5, Safari 3.1, Opera 10, Chrome 4. Soweit die guten Nachrichten. Microsoft hat sich allerdings ein eigenes Schriftformat einfallen lassen: EmbeddedOpenType (EOT). Mit einer kostenlos downloadbaren Software WEFT (Web Embedding Fonts Tool – Why thE Fuck This?) lassen sich damit TrueType Schriften als .eot files speichern und einbinden.
Im Code ist dafür dann eine eigene Zeile mit Benennung der Quelle notwendig:

src: url('lobster.eot')

Schräge Typen Typo: Text rotieren

Auch gerne gesehen und per CSS nicht nur auf Text sondern auch auf alle anderen Inline-HTML Elemente anwendbar (z.B. input was zu recht schrägen Formularen führt): transform: rotate.
Der CSS-Code ist dabei für die verschiedenen Browserengines mit den gebräuchlichen Kürzeln versehen:

.rotate {
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg)}

Eine klitzekleine Ausnahme gibts – ausnahmsweise – beim Internet Explorer. Da sieht das ganze so aus:
filter: progid:DXImageTransform.Microsoft .BasicImage(rotation=3)

Die Ziffer (hier = 3) gibt offensichtlich die Rotation an. Allerdings die Notwendigkeit zur feinen, also gradgenauen Dosierung fand man bei Micorsoft überlüssig. Hier heißt es: drehen in 1/4-Schritten, also 1=90°, 2= 180° u.s.w.
Mit diesem kleinen Wermutstropfen muss man als Webdesigner – und insbesondere IE-Nutzer – leider wieder leben.
Trotzdem – viel Spaß damit

Noch eine Kostprobe: Tangerine bei 20°

Dieser Beitrag wurde unter CSS3 abgelegt und mit , , , , , , , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Eine Antwort auf TrueType Fonts und Text-Transformation mit rotate

  1. Uwn sagt:

    Echt super! Hab gerade neulich nach Rotation gesucht, um ein Video leicht anzuschrägen. Jetzt bin ich hier zufällig fündig geworden. Geile Sache! :)

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *