Wie beurteilen Sie die Schriftgrößen in CSS festlegen, damit sie Mockups übereinstimmen und Ändern der Größe erlauben?

StackOverflow https://stackoverflow.com/questions/213128

  •  03-07-2019
  •  | 
  •  

Frage

Wir laufen in Probleme mit, wie wir die Schriftgrößen angeben. Wenn wir die Schriftgrößen mit pt angeben, sie sehen nicht immer die gleichen in allen Browsern / Plattformen. Wenn wir die Schriftgrößen angeben px verwenden, IE6-Benutzer können den Text nicht ändern.

War es hilfreich?

Lösung

Ein Artikel auf A List Apart (November 2007) erforscht diese in der Tiefe in verschiedenen Browser und folgerte:

  

Sizing Text und line-height in ems, mit einem Anteil an dem Körper festgelegt (und eine optionale Einschränkung für Safari 2), wurde gezeigt, heute gebräuchliche genau, veränderbaren Text in allen Browsern zur Verfügung zu stellen. Dies ist eine Technik, die Sie in Ihrer Kit Tasche stecken können und als Best Practice verwenden für Text in CSS Sizing, die sowohl Designer und Leser gerecht wird.

Sie lieferten Screenshots , wie diese Technik aussieht in den meisten gängigen Browsern. Hier ist der Code, den sie verwendet: 

<style type="text/css">`
body {
    font-size:100%;
    line-height:1.125em;
}

.bodytext p {
    font-size:0.875em;
}

.sidenote {
    font-size:0.75em;
}
</style>

<!--[if !IE]>-->

<style type="text/css">
body {
    font-size:16px;
}
</style>

<!--<[endif]-->

Andere Tipps

im Gegensatz zu dem, was andere beantwortet haben, sollten Sie nie Pixel für Schriftgrößen verwenden. Internet Explorer 6 hat noch ein großes Stück des Browser-Markt Kuchens, und es wird absolut nicht Text der Größe, die mit einer Pixelgröße angegeben wird (wie in der Frage erwähnt). Sie sollten immer danach streben, "em" s.

zu verwenden,

i verwenden eine Technik, ähnlich dem, was andere hier vorgeschlagen haben, wobei ich „Reset“ CSS-Stile auf der ganzen Linie alle Browser Inkonsistenzen mit Schriftgrößen und Positionierung zu entfernen. Ich mag eric meyer Reset Stile als Basis neu geladen. Verwenden Sie könnten auch die yahoo Reset CSS Methode, wenn Sie in diese ganze Bibliothek graben wollten.

Als nächstes i verwenden owen briggs' gesund CSS Typografie Vorlage . Sie können feststellen, dass es nicht seit 2003 aktualisiert wird, aber immer noch absolut solide mit dem heutigen Browsern.

, sobald Sie diese Basis zu bekommen, es ist einfach eine Frage der Veränderung der Schrift bezogen auf dem <body>-Tag, das leicht alle Schriften über Ihre Website auf die gleiche Weise skaliert.

für die Ungeduldigen, hier ist eric meyer Reset CSS und owen briggs' Typographie css püriert zusammen (analysiert durch

Sie sollten immer relative Einheiten für Schriftgrößen, wie em verwenden.

http://developer.yahoo.com/yui/fonts/#fontsize (edit:. ich glaube, das ihre Basis CSS geht davon aus, aber es ist eine Basisgröße von 13px unter der Annahme, ich glaube sogar IE Prozent großen Text richtig paßt die Größe, wo die Prozent gegen eine px Größe gemessen werden)

Das heißt, Sie werden nie pixelgenaue Schriftgrößen zu erhalten, insbesondere , wenn Sie versuchen, eine grafische Mockup passen, aber auch nur Browser zu Browser, werden die Dinge in Textdarstellung abweichen.

Sie werden immer Schwierigkeiten passende Mockups haben, wenn Sie Pixel verwenden. http://www.456bereastreet.com/archive/200602/setting_font_size_in_pixels/ < br> Ich fühle mich nicht, dass es nichts besonders falsch mit Pixel für Ihre Web-Seiten verwenden. Vor allem, da fast alle modernen Browser - für webkit speichern - Verwendung im Gegensatz Zoomen standardmäßig auf Text-Größe neu bestimmen.

Ich könnte noch halten, was Nathan schlägt vor, wie es erlaubt mehr Sie Agilität entwerfen, wie Sie schnell die gesamte Website Schriftgrößen, indem einer von ihnen nur skaliert werden kann. Aber wenn Sie faul sind oder wollen es wirklich-on erkennen, dann müssen Sie nicht von px Angst.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top