Inhaltsverzeichnis |
Firefox 3.5 ist vor allem ein aufregendes Release für Web-Entwickler/innen. Über den <video>-Tag hab ich schon geschrieben, heute kommt etwas leichter testbares und ähnlich aufregendes: Die neuen CSS-Features. Ich werde nicht alle Neuigkeiten vorstellen, sondern die (meiner Meinung nach) wichtigsten.
Beide CSS-Eigenschaften sind nicht wirklich neu, ich hab diese Sachen bisher trotzdem nicht verwendet und bin nicht der einzige.
Die Beispiel-Implementierungen funktionieren selbstverständlich nur mit den unterstützten Browsern, eine Internet Explorer-Weichen für die filter-Eigenschaft bei text-shadow hab ich nicht eingebaut!
@font-face: Herunterladbare Schriftarten
Browser: Firefox 3.5, Safari 3.1, Opera 10, Internet Explorer 4
@font-face hat das Potential, Webdesign in Zukunft stark zu verändern. Man kann damit eigene Schriftarten definieren, die am eigenen Server liegen.
Bisher hatten Web-Designer/innen das Problem, dass sie sich nur bei ganz wenigen Schriftarten darauf verlassen konnten, dass ein großer Anteil sie am Computer installiert hat. Deshalb beschränken sich die Schriften auf Websites weitgehend auf Arial, Verdana bzw. Times New Roman und Georgia.
Problem: Schriftart-Formate
Es gibt verschiedenste Schriftart-Formate – TrueType, OpenType, TrueDoc, Embedded OpenType (EOT) – und die Browser-Hersteller waren bzw. sind sich nicht einig, was sie verwenden sollen. Da ist Microsoft, das während des ersten Browserkriegs EOT entwickelt hat und Netscape, das auf TrueDoc gesetzt hat, was aber nie im Mozilla-Code gelandet ist.
Da EOT eine proprietäre Technologie von Microsoft ist, gibt es nur wenige Tools, um bestehende Schriftarten von in das .eot-Format umzuwandeln. Das ist der wesentliche Grund, warum @font-face nie Fuß gefasst hat.
Die Alternativbrowser unterstützen OpenType und TrueType – also “normale” Schriftartdateien.
Beispiel
Dieses Beispiel funktioniert nicht in einem Feed-Reader!
Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<style type="text/css">
@font-face{
font-family: 'Fontin-Regular';
src: url('http://sebmos.at/wp-content/uploads/2009/07/Fontin-Regular.otf') format('opentype');
}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
@font-face{
font-family: 'Fontin-Regular';
src: url('http://sebmos.at/wp-content/uploads/2009/07/Fontin-Regular.eot');
}
</style>
<![endif]-->
Fontin Schriftart von jontangerine.com
text-shadow
Browser: Firefox 3.5, Safari 1.1, Opera 9.5, Internet Explorer 5.5 (via filter)
Ein kleines Attribut, das ich schon oft sehr schön eingesetzt gesehen habe, ist text-shadow. Damit kann man, wie der Name schon sagt, einen Schatten an einen Text anhängen.
Beispiel
Großer Schatten versus kleiner Schatten
So sieht das vom System her aus:
text-shadow: <Farbe> <x-Offset> <y-Offset> <Unscharfe-Radius>
Und so hab ich den Text oben formatiert:
<span style="text-shadow: #090 2px 2px 5px;">Großer Schatten</span>
<span style="text-shadow: #090 1px 1px 0;">kleiner Schatten</span>
