FB18 - Das Forum für Informatik

fb18.de / Off-Topic / Hard- und Softwarefragen

CSS intelligent Webdesign?

CSS intelligent Webdesign? 2006-09-06 20:57
Anonymer User
Weiss einer von euch wie man unterschiedliche Font sinnvoll per .css-datei für die website einbindet?
Ich mein, wenn man davon ausgeht das der User nicht die Schriftart bei sich hat, wie macht man das?

- Bin in Sachen Webdesign/CSS ein blutiger Anfänger…
Könnt ihr mir dazu noch gute Bücher und/oder Online-Tuts empfehlen?

danke

Re: CSS intelligent Webdesign? 2006-09-06 21:04
Marrow
Die fallen mir erstmal ein:
http://de.selfhtml.org/
http://www.htmldog.com/
http://www.htmlhelp.com/

Gibt so einige Seiten. Mit einer Suchmaschine kann man zahlreiche andere finden.

Re: CSS intelligent Webdesign? 2006-09-06 21:40
Anonymer User
Die fallen mir erstmal ein:
http://de.selfhtml.org/
http://www.htmldog.com/
http://www.htmlhelp.com/

Gibt so einige Seiten. Mit einer Suchmaschine kann man zahlreiche andere finden.

sieht ja mehr nach html aus… gibs da a bissl mehr css?

Re: CSS intelligent Webdesign? 2006-09-06 21:45
Marrow
Auf allen drei Seiten sind doch Links zu CSS-Infos. [img]http://www.fb18.de/gfx/5.gif[/img]

Re: CSS intelligent Webdesign? 2006-09-06 21:51
Anonymer User
ach so - sorry [img]http://www.fb18.de/gfx/24.gif[/img]

gibs auch gutes Buch zum empfehlen ( was vielleicht auch in der info-lib da ist) ?

+weiss denn jemand ne Antwort auf meine erste Frage…

Re: CSS intelligent Webdesign? 2006-09-06 22:31
f0k
+weiss denn jemand ne Antwort auf meine erste Frage…
Wie Du CSS-Stile einbindest, musst Du Dir wohl sowieso durchlesen, aber wenn Du das kannst, ist font-family Dein Freund. Du kannst dort mehrere Schriftarten angeben, und die erste auf dem Computer vorhandene wird genommen. Wenn Du beispielsweise Deine ganze Website in der Schriftart "Zwei und vierzig", aber notfalls in "Arial" oder "sans-serif" haben willst, könntest Du zentral definieren:
body { font-family: 'Zwei und vierzig', Arial, sans-serif; }/edit: Nach dem nochmaligen Lesen Deines ersten Posts kommt mir der Gedanke, dass Du vielleicht eine Schriftart in einer Form verwenden willst, so dass auch Benutzer, die diese Schriftart gar nicht haben, Deine Seite trotzdem in dieser Schriftart sehen… dazu gibt's zwar auch was, das wird aber nur vom IE unterstützt und gehört nicht mehr zum CSS-Standard.

Re: CSS intelligent Webdesign? 2006-09-06 23:41
Viciarg
dass Du vielleicht eine Schriftart in einer Form verwenden willst, so dass auch Benutzer, die diese Schriftart gar nicht haben, Deine Seite trotzdem in dieser Schriftart sehen…

"Diese Seite ist für den Schriftfont 'Zwei und Vierzig' optimiert. Sie können sich diesen Font hier runterladen."

Du willst die Besucher Deiner HTML-Seite nicht bevormunden. Wenn sie die Seite in Times sehen wollen, sollen sie sie auch in Times sehen können.

Re: CSS intelligent Webdesign? 2006-09-07 00:12
DeGT
Und wenn du unbedingt ein _ganz_ spezielles Layout brauchst, solltest du den Teil eventuell besser in Bilder gießen. (Aber bitte nicht "ich habe diese Seite mit Photoshop erstellt"…)

(Bei solchen Dingen solltest du auch beachten, dass manche Leute ihre Fontgröße anders als du haben, wodurch Seiten schnell hässlich werden können.)

Re: CSS intelligent Webdesign? 2006-09-07 00:15
Marrow
Text in Bildern ist eklig. Alleine schon wegen verschiedenen Auflösungen und verschieden großen Pixeln… Text kann man in Firefox und Mozilla schnell mit Control+ vergrößern, Bilder nicht.

Zum Beispiel die Homepage der Uni HH hat echt kleine Schrift.

Re: CSS intelligent Webdesign? 2006-09-07 00:51
Viciarg
solltest du den Teil eventuell besser in Bilder gießen

Nein. Es sei denn, es ist wirklich nur n Überschriftenbanner, mit grafischen Effekten und Krams. Aber schon allein grafische Links können richtig beschissen sein.

Re: CSS intelligent Webdesign? 2006-09-07 00:54
Da:Sourcerer
Externe Fonts lassen sich in CSS einbinden. Allerdings müssen sie dazu in ein spezielles Format überführt werden. Als ich mich damals™ mit soetwas beschäftigt habe, war der Prozess für MSIE und Netscape unterschiedlich.

Re: CSS intelligent Webdesign? 2006-09-07 01:26
Viciarg
Heute gibt es nur noch CSS 2.0, alles andere ist … überflüssig.

Re: CSS intelligent Webdesign? 2006-09-07 01:43
Zaphod
Noch n gutes Tutorial:

http://www.w3schools.com/

Re: CSS intelligent Webdesign? 2006-09-07 08:55
joda_der_weise
Aus Erfahrung kann ich nur davon abraten eine Schritart zu verwenden, die nicht zu den "Standart"-Fontfamalies gehört.
Ich verstehe Dich so (bzw. interpretiere ich so), dass Du ganze Texte in dieser Schriftart verfassen willst.
Du kannst dank CSS und DHTML schon eine ganze Menge mit den Standartschriftarten machen und das sollte eigentlich reichen.

Für Überschriften, Navi, etc. kannst Du natürlich(!) andere Fonts in Grafiken betten, wobei hierbei die spätere Position und Auflösung/Qualität wichtig ist.
Die sich bei Bilder das JPEG-Format durchgesetzt hat, solltest Du auf eine möglichst gute Ausgangsqualität achten. Besonders tückisch sind Fehldarstellungen einzelner Browser von Hintergrundfarben (BGCOLOR) und der eingebetteten Hintergrundfarbe Deines Bildes.

Re: CSS intelligent Webdesign? 2006-09-07 10:17
Viciarg
Die sich bei Bilder das JPEG-Format durchgesetzt hat

Gerade für grafische Überschriften, in denen nur der Text zu sehen ist, ohne großartigen fotorealistischen Hintergrund, ist das GIF-Format viel eher geeignet. Nicht zu vergessen, daß es auch PNG-Grafiken gibt. Die Behauptung, JPEG hätte sich irgendwie gegenüber irgendetwas anderem "durchgesetzt", halte ich für arg übertrieben.

Besonders tückisch sind Fehldarstellungen einzelner Browser von Hintergrundfarben (BGCOLOR) und der eingebetteten Hintergrundfarbe Deines Bildes.

Gerade für solche Zwecke gibt es transparente GIFs und PNGs.

Re: CSS intelligent Webdesign? 2006-09-07 11:30
DeGT
Text in Bildern ist eklig. Alleine schon wegen verschiedenen Auflösungen und verschieden großen Pixeln… Text kann man in Firefox und Mozilla schnell mit Control+ vergrößern, Bilder nicht.

Siehe hier oben links, "FB18 Das Forum für Informatik". Solche Sachen meinte ich.

Ich kann meine Aussage auch gerne anders formulieren: Wenn du dem Benutzer die Darstellungsfreiheiten möglichst weit beschneiden willst, benutze Text in Bildern.

Transparente pngs sind übrigens wirklich cool.

Re: CSS intelligent Webdesign? 2006-09-07 13:09
Anonymer User
Danke, für die ganzen Typs und Meinungen…

…eine Frage mit welchem Tool lassen sich schnell und einfach (auch für Anfänger) transparente .png erstellen?

Re: CSS intelligent Webdesign? 2006-09-07 13:58
Marrow
…eine Frage mit welchem Tool lassen sich schnell und einfach (auch für Anfänger) transparente .png erstellen?
Es gibt ewig viele Grafikprogramme.

Ich komme mit Gimp ganz gut zurecht und mit Inkscape.
Inkscape ist ein Vektorgrafikprogramm und kann nach PNG in gewünschter Auflösung exportieren (das kann ganz praktisch sein). Wenn man hinter die Grafik nichts legt (also z. B. Kasten in weiß), ist der Hintergrund transparent.

Die beiden Programme sind meine Favoriten (alles Geschmacksfrage).
Auf http://de.wikipedia.org/wiki/Grafikprogramm ist ausserdem eine schöne Übersicht, was es denn so gibt. [img]http://www.fb18.de/gfx/23.gif[/img]

Re: CSS intelligent Webdesign? 2006-09-07 16:24
f0k
Text kann man in Firefox und Mozilla schnell mit Control+ vergrößern, Bilder nicht.
Interessant. Opera vergrößert auch die Bilder mit. *freu* Wird natürlich trotzdem pixelig, also für Text ist das nix.

Heute gibt es nur noch CSS 2.0, alles andere ist … überflüssig.
Wie meinen? In CSS 2.0 war das mit den "serverseitigen" Schriften (@font-face) noch erlaubt, in CSS 2.1 nicht mehr.

Transparente pngs sind übrigens wirklich cool.
Das stimmt, damit kann man echt tolle Sachen machen. Nur leider, ich weiß nicht, ob sich das inzwischen geändert hat, werden sie vom weitverbreitetsten Browser nicht unterstützt (ich rede von 24-Bit-PNGs mit Alphachannel (für Anfänger: dann hat man nicht nur transparent oder nicht transparent, sondern auch alles dazwischen)).
-> kurz getestet: Nein, IE6 kann's nicht.

Ansonsten stimme ich Joda zu (außer beim JPEG-Thema), verwende lieber verbreitete Schriftarten. Vom Server zur Verfügung gestellte Schriftarten werden wie gesagt nicht wirklich unterstützt, der Umweg über Grafiken ist zwar möglich, kostet Dich aber viel mehr Arbeit (besonders, wenn Du das bei allen Überschriften vorhast) und ist eigentlich nur eine Notlösung. Mit CSS kannst Du sehr viel machen. Experimentiere einfach mal mit verschiedenen Schriftgrößen und -schnitten (in CSS gibt es z.B. verschiedene Abstufungen von Fettdruck), veränderten Zeichenabständen - Du wirst erstaunt sein, was man da aus Standardschriftarten rausholen kann. (Sowas solltest Du aber nur für Überschriften oder Hervorhebungen machen; im Fließtext liest sich die unveränderte Schriftart natürlich am besten, denn dafür wurde sie ja konzipiert).

Re: CSS intelligent Webdesign? 2006-09-07 16:36
Marrow
Text kann man in Firefox und Mozilla schnell mit Control+ vergrößern, Bilder nicht.
Interessant. Opera vergrößert auch die Bilder mit. *freu* Wird natürlich trotzdem pixelig, also für Text ist das nix.
Gibt für Firefox auch eine Extension mit Lupe, wenn man will.

Aber die Meinung ist recht klar hier: Für Überschriften kann Text in Bildern ok sein (Banner und Co.), aber bitte bitte nicht im informativen Teil der Webseite. [img]http://www.fb18.de/gfx/22.gif[/img]

Re: CSS intelligent Webdesign? 2006-09-07 17:53
DeGT
Und wenn du immer neue Überschriften als Grafik haben willst, kannst du Imagemagick oder gd nehmen. Damit kannst du soweit ich weiß auch transparente pngs machen. Das ganze kannst du dann automatisiert machen, was ja ganz nett ist. Allerdings solltest du bei solchen Bildern immer auf den alt-Tag achten.

Re: CSS intelligent Webdesign? 2006-09-07 22:42
joda_der_weise
Aus Erfahrung kann ich nur davon abraten eine Schritart zu verwenden, die nicht zu den "Standart"-Fontfamalies gehört.
Ich verstehe Dich so (bzw. interpretiere ich so), dass Du ganze Texte in dieser Schriftart verfassen willst.
Du kannst dank CSS und DHTML schon eine ganze Menge mit den Standartschriftarten machen und das sollte eigentlich reichen.

Für Überschriften, Navi, etc. kannst Du natürlich(!) andere Fonts in Grafiken betten, wobei hierbei die spätere Position und Auflösung/Qualität wichtig ist.
Die sich bei Bilder das JPEG-Format durchgesetzt hat, solltest Du auf eine möglichst gute Ausgangsqualität achten. Besonders tückisch sind Fehldarstellungen einzelner Browser von Hintergrundfarben (BGCOLOR) und der eingebetteten Hintergrundfarbe Deines Bildes.

Ich wollte gerade zu den Gifs die Lizenzfrage aufbringen, aber irgendwie ging an mir vorbei dass die schon frei sind

http://www.golem.de/0407/32521.html