freeQnet-Logo
freeQnet

@font-face

Wie die meisten von euch vermutlich mitbekommen haben werden, ist gestern der neue Firefox 3.5 erschienen. Neben einigen wirklich netten Features, die man als Anwender zu sehen und nutzen bekommt, hat sich aber auch in Sachen CSS so einiges getan. Endlich unterstützt der Firefox nämlich die schon lang überfällige Angabe @font-face. Mit dieser ist es möglich, hochgeladene Schriftarten für das Layout zu verwenden, ohne dass diese auf dem Rechner des Anwenders installiert sein müssen!

Damit eröffnen sich endlich tolle neue Design-Möglichkeiten, denn neben dem aktuellen Safari/Chrome wird auch die Version 10 von Opera @font-face unterstützen. Microsoft’s Internet Explorer ist sogar schon seit bald 12 Jahren dabei, kocht dabei aber natürlich ein eigenes Süppchen, indem nur ein eigenes Font-Format unterstützt wird. Ob und wie ich das auch eingebunden bekomme, um allen die schicken Möglichkeiten zugänglich zu machen, muss ich noch sehen.

Wer mit dem neuen Firefox zu mir auf’s Blog gekommen ist, wird sicher schon bemerkt haben, dass ich @font-face jetzt auch in meinem Layout verwende. Für die Überschriften dient mir derzeit die kostenlose Schrift Fontin, für alle anderen Texte verwende ich dagegen die ebenfalls freie Schrift Delicious. Solltet ihr noch Fehler in der Darstellung entdecken, gebt mir einfach Bescheid. Es kann gut sein, dass noch nicht alles perfekt mit den neuen Schriften harmoniert.

Ob es endgültig bei diesen Schriften bleibt, oder ich noch was anderes finde, wird sich zeigen. Es gibt zwar Unmengen toller kostenloser Schriften im Web, aber leider unterstützen die wenigsten sowohl sämtliche Sonderzeichen als auch verschiedene Schriftschnitte für Fettdruck etc. Diese sind aber leider nötig, damit alles wie gewünscht aussieht. Für’s erste bin ich aber schon mal sehr zufrieden. Wie gefällt euch die neue Schrift? Hättet ihr eine andere verwendet?

Kommentare

1

Sieht delicious aus :) Da ich von Fonts so gar keine Ahnung habe, sag ich einfach mal, kann so bleiben!
bla blubb

geschrieben von juliaL49
antworten  •  Link
2

Ich weiß nicht, ob mir das nur so vorkommt, aber irgendwie habe ich das Gefühl, dass die Schrift leicht verschwimmt bzw. unscharf ist. Kann das sein?

Ansonsten natürlich ne coole Möglichkeit, sein Design noch individueller zu machen.

geschrieben von Konna
antworten  •  Link
3

@juliaL49: Hehe, ach, zu viel Ahnung braucht man da auch nicht, wichtig ist immer, dass man selbst zufrieden ist, wie die eigene Seite aussieht – mit etwas Experimentierfreude ist da auch schon viel zu machen.

@Konna: Das kommt etwas auf die Auflösung an und ob unter Windows Schriftenglättung eingestellt ist. Die hat Microsoft nämlich nicht so dolle hinbekommen. Außerdem kann’s sein, dass es einfach nur ungewohnt aussieht, weil die Schrift ja doch ziemlich anders ist als die meisten Standardschriften, die man auswendig kennt. Aber lesbar ist doch soweit noch alles, oder?

geschrieben von beetFreeQ
antworten  •  Link
4

Auf dem MacBook gestern abend sah’s “lecker” aus, aber unter Windows (mit ClearType mit hohem Kontrast) kommt’s mir irgendwie unruhiger vor – der Abstand bei manchen Buchstabenkombinationen oder deren Position scheint etwas ungleichmäßig zu sein (z.B. ß und t etwas zu weit links, e zu weit rechts).

Microsoft berücksichtigt, soweit ich weiß, bei der Glättung auch die tatsächlichen Monitor-Pixel und konzentriert die Schriftpixel darauf, während Apple der Schrift den Vorzug gibt (und dadurch zunächst unschärfer aussieht, aber auch eher “wie gedruckt”)… (und von der Schriftgröße hängt’s natürlich auch ab).

geschrieben von cimddwc
antworten  •  Link
5

@cimddwc: Ja, dass es auf dem MacBook weit besser aussieht, denk ich mir – da ist Apple Microsoft wirklich weit voraus. Aber ich finde das Aussehen unter Windows auch schon ganz ok – besser als die Standardschriften, die für meinen Geschmack noch schlechter geglättet werden. Dass Buchstaben wie das “e” oder “t” zu weit links erscheinen, kann ich bei mir nicht bestätigen, aber das wird sicher wie du sagst mit der Bildauflösung zu tun haben…

Am wichtigsten ist für den Fließtext sicher eine möglichst ruhige Schrift zu verwenden, die möglichst alle Sonderzeichen unterstützt und auch als Bold-Variante verfügbar ist. Bei den Überschriften ist es da zum Glück schon einfacher, da die ja meistens groß genug für ausgefallenere Schriften sind.

geschrieben von beetFreeQ
antworten  •  Link
6

Also ich habe auch das Gefühl, dass die Schrift verschwimmt. Aber da eröffnen sich wirklich coole neue Möglichkeiten. Und ganz davon ab. Gut aussehen tut das hier auch :D. Schwimmen ist ja bei dem Wetter nicht verkehrt. Vielleicht ist der Schriftart auch nur mal nach Abkühlung ;).

geschrieben von Lordy
antworten  •  Link
7

Schöne Artikel, sehr informativ, denn davon wusste ich bis jetzt nicht. Ich muss den anderen aber zustimmen, die Lesbarkeit hat ein wenig gelitten, ich habe die Ansicht deiner Webseite von “Normal” auf 1x vergrößern gestellt, damit liest es sich besser.
Aber die Möglichkeiten sind natürlich enorm, bin gespannt, wann sich css3 vollständig durchsetzt.

geschrieben von Robert
antworten  •  Link
8

Interessanter Tip, vielen Dank! Wollte damals für wordpress dieses Überschriftentool verwenden und bin gnadenlos gescheitert. Von daher… Super!

Zu delicious: Wie einige schon bemerkt haben, sieht die Schrift unsauber, unscharf aus (1680, ff3.5, xp) und etwas nach oben gezerrt. Also recht hohe Buchstaben. Es ist nicht total unlesbar und hat seinen Charme, aber wirkt nicht ganz richtig :)

geschrieben von Tom
antworten  •  Link
9

Also ich kann Andreas bestätigen, ß und t etwas zu weit links, e zu weit rechts – es tun sich ein paar Lücken auf. Nutze Win XP mit Schriftenglättung und einer Auflösung von 1680×1050.

Es ist jetzt nicht soo gravierend, man kann trotzdem lesen, aber es ist mir eben schon aufgefallen. :)

geschrieben von Konna
antworten  •  Link
10

@Lordy: Hehe, genau! Oder sie schmilzt vor lauter Hitze und sieht deshalb so verzerrt aus.

@Robert: Hmm, die Lesbarkeit soll ja an sich nicht leiden. Mal sehen, ob ich ne bessere Schrift finde. Ich denke, im Fließtext ist die Individualität nicht ganz so wichtig, aber in den Überschriften etc. lässt sich das ja weiter problemlos verwenden.

@Tom: Ja, ich hab auch schon mal diverse Überschriften-Plugins probiert, aber wirklich zufrieden war ich nie. Mit @font-face geht’s endlich ganz ohne Plugin, was ja auch wieder Bandbreite spart!

@Konna: Ja, hab’s mittlerweile auch auf verschiedenen Rechnern schon etwas nachvollziehen können. Werde wohl im Fließtext entweder zur alten Schriftart zurück wechseln oder schauen, ob ich eine schöne finde, die unter Windows besser geglättet wird.

geschrieben von beetFreeQ
antworten  •  Link
11

@beetFreeQ: Das ist natürlich auch eine logische Erklärung ;).

geschrieben von Lordy
antworten  •  Link

Trackbacks/Pingbacks

1

[…] Über den Firefox berichten unter anderem: Dinofuss freeqnet Golem tdaus Web-Newspaper Twitter Special – Alles über Twitter Tags dieses […]

gesendet von » Firefox 3.5 Tipps-Archiv - 1000 Tipps und Tricks
Be excellent to each other. And... Party on, dudes!

Bill & Ted

Blogverzeichnis - Blog Verzeichnis bloggerei.de blogoscoop Bloggeramt.de