Schriftgröße sowie Position unterschiedlich bearbeitet von stefan 28.10.2015 15:51 > Hallo> > > Kann mir bitte einer helfen und mir erklären wie es zu den unterschieldichen Darstellungen kommt?> > Die [Einheit vh](https://wiki.selfhtml.org/wiki/CSS/Wertetypen/Zahlen,_Ma%C3%9Fe_und_Ma%C3%9Feinheiten#Relative_L.C3.A4ngenma.C3.9Fe) bezieht sich auf die Höhe des Viewports. Deine `7vh` entsprechen 7% der Viewporthöhe des Browsers. Die Schriftgröße verändert sich also abhängig von der Höhe des Viewports, was bei unterschiedlichen Displays, unterschiedlichen Browsern und unterschiedlichen Browserfenstergrößen zu unterschiedlichen Schriftgrößen führt.> > Für Schriftgrößen ist `vh` als Einheit in den allermeisten Fällen nicht die beste Wahl. Mit `em` bzw. `rem` machst du deine Schriftgröße von den (meist unveränderten) Schriftgrößeneinstellungen des Browsers des Nutzers abhängig. Damit verändert sich die Schriftgröße eventuell je Browser, sie ist aber *in des Nutzers einem Browser* unabhängig von der Viewportgröße immer gleich.> > Noch ein paar allgemeine Kritikpunkte.> > - Die Schriftfamilie kannst du auch ohne das **vorsintflutliche** MSIE-Element `font` festlegen. Du kannst es z.B. an das Elternelement (`#benjaminwillgruber`) oder direkt an die einzelnen divs (`#benjamin`, `#willgruber`) vergeben. Damit fiele `font` weg.> - Zudem gehört diese Angabe, wie alle anderen Angaben, in das Stylesheet und nicht als Attribut in das Element.> - Da nicht jeder die Schriftart installiert hat oder das Herunterladen von Schriften erlaubt, gib bitte noch alternative Schriftarten **und** eine generische Familie (hier sans-serif) an.> - Die Anführungszeichen um den Schriftartnamen brauchst du nur, wenn der Name Leerzeichen enthält.> - Du kannst übrigens gleiche Vorgaben für mehrere Elemente zusammenfassen.> > ~~~css> #benjaminwillgruber {> /* die anderen Angaben */> font-family: avril, 'andere Schriftart' sans-serif;> }> > #benjamin, #willgruber {> font-size: 7vh;> color: #ffffff;> }> ~~~]DIE LÖSUNG DES GANZEN ÜBELS: line-height musste definiert, werden somit passt es jetzt auf den anderen auch.> > Tschö, Aug[Re> > -- > Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem FVollammenwerfer. > Terry Pratchezitt, „Gevatter Tod“]
Schriftgröße sowie Position unterschiedlich bearbeitet von Matthias Apsel 28.10.2015 16:28 > Hallo > > > Kann mir bitte einer helfen und mir erklären wie es zu den unterschieldichen Darstellungen kommt? > > Die [Einheit vh](https://wiki.selfhtml.org/wiki/CSS/Wertetypen/Zahlen,_Ma%C3%9Fe_und_Ma%C3%9Feinheiten#Relative_L.C3.A4ngenma.C3.9Fe) bezieht sich auf die Höhe des Viewports. Deine `7vh` entsprechen 7% der Viewporthöhe des Browsers. Die Schriftgröße verändert sich also abhängig von der Höhe des Viewports, was bei unterschiedlichen Displays, unterschiedlichen Browsern und unterschiedlichen Browserfenstergrößen zu unterschiedlichen Schriftgrößen führt. > > Für Schriftgrößen ist `vh` als Einheit in den allermeisten Fällen nicht die beste Wahl. Mit `em` bzw. `rem` machst du deine Schriftgröße von den (meist unveränderten) Schriftgrößeneinstellungen des Browsers des Nutzers abhängig. Damit verändert sich die Schriftgröße eventuell je Browser, sie ist aber *in des Nutzers einem Browser* unabhängig von der Viewportgröße immer gleich. > > Noch ein paar allgemeine Kritikpunkte. > > - Die Schriftfamilie kannst du auch ohne das **vorsintflutliche** MSIE-Element `font` festlegen. Du kannst es z.B. an das Elternelement (`#benjaminwillgruber`) oder direkt an die einzelnen divs (`#benjamin`, `#willgruber`) vergeben. Damit fiele `font` weg. > - Zudem gehört diese Angabe, wie alle anderen Angaben, in das Stylesheet und nicht als Attribut in das Element. > - Da nicht jeder die Schriftart installiert hat oder das Herunterladen von Schriften erlaubt, gib bitte noch alternative Schriftarten **und** eine generische Familie (hier sans-serif) an. > - Die Anführungszeichen um den Schriftartnamen brauchst du nur, wenn der Name Leerzeichen enthält. > - Du kannst übrigens gleiche Vorgaben für mehrere Elemente zusammenfassen. > > ~~~css > #benjaminwillgruber { > /* die anderen Angaben */ > font-family: avril, 'andere Schriftart' sans-serif; > } > > #benjamin, #willgruber { > font-size: 7vh; > color: #ffffff; > } > ~~~ DIE LÖSUNG DES GANZEN ÜBELS: line-height musste definiert, werden somit passt es jetzt auf den anderen auch. > > Tschö, Auge > > -- > Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer. > Terry Pratchett, „Gevatter Tod“
nicht angemeldet
