Welche Fonts nutzen, damit es in allen Browsern dargestellt wird

[Mace]

Ich habe eine Webseite in MS Word designed (halt wo welche Grafik, Text, Layout kommt). Der Programmierer hat dann einfachheitshalber ein Konzept, was er wie umsetzten soll.

Jetzt habe ich doch in Word spezielle Fonts benutzt wie zB Segoe UI, Tempus Sans ITC, Calibri. Mein Freund meinte, dass man es so nicht 1:1 umsetzen kann, da nicht jeder Browser die speziellen Fonts zur Verfügung hat und somit die Gefaht besteht, dass es nicht richtig dargestellt wird.

Wie kann ich so was verhindern? Woher weiß, was so die üblichen Fonts sind, die alle wichtigen Browser wie FF/IE/Opera unterstützen?

[Ole]

Hallo,

im Prinzip gibt es 3 Fontgruppen die sehr häufig verbreitet sind und deren Schriften sich soweit ähneln, dass eine Seite nicht gleich komplett anders aussieht, wenn eine Schrift nicht vorhanden ist und auf die Ersatzschrift zurückgegriffen wird.

Serifenlose Schriften - Arial, Verdana, Helvetica
Schriften mit Serifen - Times New Roman, Times
Monospace Schriften   - Courier New, Courier

Gruß
Ole

[Auge]

Hallo

im Prinzip gibt es 3 Fontgruppen die sehr häufig verbreitet sind und deren Schriften sich soweit ähneln, dass eine Seite nicht gleich komplett anders aussieht, wenn eine Schrift nicht vorhanden ist und auf die Ersatzschrift zurückgegriffen wird.

Serifenlose Schriften - Arial, Verdana, Helvetica
Schriften mit Serifen - Times New Roman, Times
Monospace Schriften   - Courier New, Courier

Und alle diese Schriftarten sind unter genau einer Gruppe von Betriebssystemen *regelmäßig* zu finden, nämlich unter Windows. Unter anderen Betriebssystemen finden die sich nur *vielleicht*. Das nur mal so als Klarstellung.

Mit der Angabe einer generischen Schriftfamilie erschlägt man das Problem.

font-family: Arial, Verdana, Helvetica, sans-serif;  
font-family: Times New Roman, Times, serif;  
font-family: Courier New, Courier, monospace;

Tschö, Auge

[Gunther]

Hallo

Mit der Angabe einer generischen Schriftfamilie erschlägt man das Problem.

Und wenn du jetzt noch Schriftnamen, die ein oder mehrere Leerzeichen enthalten, in Anführungsstriche setzt, dann ist es korrekt. ;-)

font-family: Arial, Verdana, Helvetica, sans-serif;

font-family: "Times New Roman", Times, serif;
font-family: "Courier New", Courier, monospace;

  
  
Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Und wenn du jetzt noch Schriftnamen, die ein oder mehrere Leerzeichen enthalten, in Anführungsstriche setzt, dann ist es korrekt. ;-)

Es ist auch ohne Anführungsstriche korrekt.

Qapla'

[Gunther]

@@Gunnar:

nuqneH

Und wenn du jetzt noch Schriftnamen, die ein oder mehrere Leerzeichen enthalten, in Anführungsstriche setzt, dann ist es korrekt. ;-)

Es ist auch ohne Anführungsstriche korrekt.

Hehe ..., als ich meinen Beitrag geschrieben, bzw. gesendet habe, wusste ich schon, dass so eine Antwort kommen würde! ;-)

Die Spec bleibt ja gerne mal "ungenau/ unpräzise", bzw. vermeidet Festlegungen wo immer es geht (oder auch nicht).

Ich weiß, dass da steht:"Font names containing any such characters or white space should be quoted" - also "sollten".

In diesem Falle würde ich aber grundsätzlich zu der Interpretation "sollten immer" neigen, denn ohne kann es u.U. zu Problemen/ ungewollten Ergebnissen kommen, mit aber nicht.

Von mir aus kannst du es auch als "Best Practice" bezeichnen, und nur die wollen wir doch auch weitergeben/ vermitteln (gerade an unerfahrene User), oder? ;-)

Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Hehe ..., als ich meinen Beitrag geschrieben, bzw. gesendet habe, wusste ich schon, dass so eine Antwort kommen würde! ;-)

Da bin ich ja froh, dich nicht enttäuscht zu haben. ;-)

Die Spec bleibt ja gerne mal "ungenau/ unpräzise"

Wieso ungenau? Die Spec sagt: man SOLLTE Anführungszeichen verwenden, um Probleme zu vermeiden. Ist für mich genau genug.

Von mir aus kannst du es auch als "Best Practice" bezeichnen, und nur die wollen wir doch auch weitergeben/ vermitteln (gerade an unerfahrene User), oder? ;-)

Ja, das wollen wir. Sowohl diese vermitteln als auch als solche bezeichnen. ;-)

Qapla'

[Gunther]

@@Gunnar:

nuqneH

Die Spec bleibt ja gerne mal "ungenau/ unpräzise"

Wieso ungenau? Die Spec sagt: man SOLLTE Anführungszeichen verwenden, um Probleme zu vermeiden. Ist für mich genau genug.

Sehe ich anders, denn gerade von einer Spec erwarte ich eine möglichst/ äußerst präzise Formulierung. Zumal auch das Englische dafür exakte Formulierungen bereithält.

In diesem Fall hier, stellt sich für mich als Anwender doch die Frage:"Muss ich solche Schriftnamen nun (immer/ generell) in Anführungsstriche setzen, oder muss ich nicht?"
Da finde ich eine Formulierung mit "sollte" wenig hilfreich, denn "sollte" drückt nunmal nicht dasselbe aus wie "muss".

Also wäre hier der Satz "Font names containing any such characters or white space have to be quoted:" imho wesentlich besser, da er keinerlei Interpretationsspielraum bietet.

Das ist genauso wie die häufigen Geschichten mit "may" und "may not". Ich frage mich dann immer, wozu es dann überhaupt eine Spec gibt, wenn dann doch wiederum einige (wichtige) Dinge, jedem Browser-Entwickler selbst überlassen sind? Das ist doch jedes Mal wieder ein potentieller Ausgangspunkt für unterschiedliche Interpretationen/ Umsetzungen in den jeweiligen Browsern. Und das ist genau einer der Punkte, die einem das tägliche Arbeiten in der Praxis so schwer machen.

Aber genug vom W3C und seinen Standards, denn bei diesem Thema läuft mir immer die Galle über und der Arzt hat mir jegliche Aufregung untersagt! ;-)

Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

In diesem Fall hier, stellt sich für mich als Anwender doch die Frage:"Muss ich solche Schriftnamen nun (immer/ generell) in Anführungsstriche setzen, oder muss ich nicht?"

Darauf gibt die Spec auch eine genaue Antwort.

Da finde ich eine Formulierung mit "sollte" wenig hilfreich, denn "sollte" drückt nunmal nicht dasselbe aus wie "muss".

Ein Schriftartname "Lorem ipsum" muss ja auch nicht in Anführungszeichen stehen. Sollte aber (best practice).

Ein Schriftartname "Lorem   ipsum" oder "   Lorem ipsum   " hingegen muss in Anführungszeichen stehen, ansonsten würde dies als "Lorem ipsum" verarbeitet werden:

“If quoting is omitted, any white space characters before and after the font name are ignored and any sequence of white space characters inside the font name is converted to a single space.” [CSS21 §15.3]

„Werden die Anführungszeichen weggelassen, werden alle Leeraumzeichen vor und hinter dem Schriftnamen ignoriert, und eine beliebige Folge von Leeraumzeichen innerhalb des Schriftnamens wird in ein einzelnes Leerzeichen umgewandelt.“ [CSS2 §15.2.2]

Die Spec lässt keinen Zeifel offen, welche Schriftartnamen in Anführungszeichen gesetzt werden müssen und welche nicht (aber dennoch sollten).

Qapla'

[Gunther]

@@Gunnar:

nuqneH

In diesem Fall hier, stellt sich für mich als Anwender doch die Frage:"Muss ich solche Schriftnamen nun (immer/ generell) in Anführungsstriche setzen, oder muss ich nicht?"

Darauf gibt die Spec auch eine genaue Antwort.

Da finde ich eine Formulierung mit "sollte" wenig hilfreich, denn "sollte" drückt nunmal nicht dasselbe aus wie "muss".

Ein Schriftartname "Lorem ipsum" muss ja auch nicht in Anführungszeichen stehen. Sollte aber (best practice).

Ein Schriftartname "Lorem   ipsum" oder "   Lorem ipsum   " hingegen muss in Anführungszeichen stehen, ansonsten würde dies als "Lorem ipsum" verarbeitet werden:

“If quoting is omitted, any white space characters before and after the font name are ignored and any sequence of white space characters inside the font name is converted to a single space.” [CSS21 §15.3]

Die Spec lässt keinen Zeifel offen, welche Schriftartnamen in Anführungszeichen gesetzt werden müssen und welche nicht (aber dennoch sollten).

Ja, OK! Da haben sie ja ausnahmsweise nochmal Glück gehabt. ;-)
Einen weiteren wichtigen Punkt, warum man die Namen imho immer quoten sollte ist der unmittelbar folgende auf dein o.g. Zitat:"Font family names that happen to be the same as a keyword value (e.g. 'initial', 'inherit', 'default', 'serif', 'sans-serif', 'monospace', 'fantasy', and 'cursive') must be quoted to prevent confusion with the keywords with the same names."

Also stellt sich mir als geneigtem Laien doch die Frage, warum sie sich (und anderen) das Leben so (unnötig) schwer/ kompliziert machen, und nicht direkt festlegen:"Font names containing any such characters or white space have to be quoted:"
Denn wie wir ja bereits festgestellt haben, bringt das Quoting ja keinerlei Nachteile (wenn man mal von den 2 Zeichen mehr absieht) mit sich. Ich sage ja nur:"KISS"
Oder anders formuliert:"Warum einfach, wenn's auch kompliziert geht?"

So, ich glaube, jetzt sind aber wirklich auch alle Klarheiten beseitigt! ;-)

Gruß Gunther

[Gunther]

Hi!

Jetzt habe ich doch in Word spezielle Fonts benutzt wie zB Segoe UI, Tempus Sans ITC, Calibri. Mein Freund meinte, dass man es so nicht 1:1 umsetzen kann, da nicht jeder Browser die speziellen Fonts zur Verfügung hat und somit die Gefaht besteht, dass es nicht richtig dargestellt wird.

Womit er prinzipiell völlig Recht hat. Denn es ist abhängig davon, welche Schriftarten auf dem jeweiligen System installiert sind, und das variiert halt von System zu System. Hinzukommt, dass bspw. ein und dieselbe Schriftart je nach OS (Windows, Linux, MacOS X, u.v.m.) einen anderen Namen hat.

Wie kann ich so was verhindern?

Eigentlich gar nicht. Das ist auch nicht Sinn der Sache (eine Internetseite ist kein "gedrucktes" Dokument, welches immer und überall gleich aussieht!).

Hinzukommt, dass nicht jede Schriftart auch gleich gut für eine Bildschirmdarstellung geeignet ist, weshalb es sich bspw. empfiehlt, für die Darstellung eine andere Schriftart und auch eine andere Schriftarten-Familie (in diesem Fall bevorzugt "sans-serif") zu wählen, als für den Druck (hierfür bevorzugt "serif").

Wenn du mal nach "Webschriftarten" googelst, findest du
a) eine Übersicht, über häufig verwendete Schriftarten,
b) deren Namen je nach OS, sowie eine Angabe über die Wahrscheinlichkeit ihres Vorhandenseins (bspw. weil sie zum Standard des jeweiligen OSs gehört).

Woher weiß, was so die üblichen Fonts sind, die alle wichtigen Browser wie FF/IE/Opera unterstützen?

Das hat nichts mit dem Browser zu tun, sondern hängt von den installierten Schriftarten auf dem jeweiligen System ab. Und finden kannst du solche Infos u.a. bei Google (s.o.)!

Neuere Browserversionen unterstützen teilweise auch schon die @font-face Regel.

Gruß Gunther