Line-Height nicht mit dem font-size

Wenn ich die zwei Zeile text mit verschiedenen Schrift-Größe, die Sie überlappen.
Schauen Sie auf dieses Beispiel :
http://jsfiddle.net/3WcMG/1/

Alle 'j' und 'g' versteckt sind, die zu der zweiten Zeile. Es bedeutet, dass mit allen Haupt-Schriften.

Warum wirkt es so? Was kann ich tun, um zu vermeiden, dass?

EDIT: ich weiß, was " em " bedeutet, ich weiß, wie Sie die Seitenränder, ich weiß, wie die Erhöhung der Zeilenhöhe, ich weiß, was ist die Wirkung der css-reset von JSFiddle und das ist nicht meine Frage. Meine Frage ist: Warum die Unterseite der " j " ist aus der box der text? Wie es aussieht, wenn ich negative margin-top auf die zweite Zeile (außer, dass ich nicht, es sieht aus wie das Standard).
Gibt es eine Möglichkeit, die Schrift in die box passen.

EDIT2: Es scheint, dass es ein browser-Problem! Ich bin auf chrome 21.0 auf Mac und ich sehe, dass :
Line-Height nicht mit dem font-size

  • wenn Sie die Markierung für die Normalized CSS Kontrollkästchen im linken Menü des jsfiddle.net und aktualisieren Sie die fiddle sehen Sie das Ergebnis wie folgt aus: jsfiddle.net/akhurshid/3WcMG/2
  • Dies ist aufgrund CSS-Reset
  • Geben Sie Ihre <p> einige top-Margen zu vermeiden, kleben zwei <p> tags
  • Finden Sie eine Beispiel mit einem top-margin
InformationsquelleAutor tibo | 2012-08-08
  1. 15

    1em ist gleich 1 mal die Anzahl der Pixel in einer schriftart Größe. Also, wenn Ihr font-size ist, 60px, 1em = 60px. Wenn es 14px, 1em = 14px, und so weiter. Einstellung der line-height zu 1em macht es gleich 1 ist, multipliziert mit der Anzahl der Pixel.

    Kann es einige Verwirrung, weil die Standard line-height festgelegt, indem der user-agent-stylesheet ist in der Regel irgendwo rund 1,5 em, also eine 12px font-size Ergebnis wäre eine 18px line-height.

    em-Einheit

    Entspricht der berechnete Wert von 'font-size' - Eigenschaft des
    element, auf dem es verwendet wird,

    Quelle: http://www.w3.org/TR/css3-values/#font-relative-lengths

    Siehe auch: http://www.w3.org/TR/CSS21/syndata.html#length-units

    Basierend auf diese, Ihre ursprüngliche Beispiel ist genau das, was ich erwarten würde, zu sehen. Als Referenz, hier ist, was ich sehe in Chrome:

    Line-Height nicht mit dem font-size

    Ihre erste Linie ist 60px hoch, aber die berechnete Wert (W3 Begriff) der zweite 14px (diktiert von der Klasse angewendet). Beide haben eine line-height von 1em. So, die line-heights werden 60px und 14px beziehungsweise. Denn das ist das gleiche wie die Größe der schriftart, die zwei Linien, die sich berühren (dies kann von Schrift zu Schrift unterschiedlich).

    Wenn Sie sehen, überlappende Verhalten, das ist ein anderes problem.

    Zur änderung des Verhaltens, können Sie einen anderen line-height, padding, margin, etc. Als seitliche Anmerkung, rem-Einheiten intuitiver sein kann, obwohl Unterstützung fehlt in älteren Browsern.

    Für eine übersicht von CSS-Einheiten finden Sie unter: http://css-tricks.com/css-font-size/

    Schriften, die nicht ausgerichtet mit den Kanten der box

    Aktualisiert Frage/Problem

    Line-Height nicht mit dem font-size

    Im Hinblick auf die aktualisierte Frage, siehe: http://www.w3.org/TR/css3-fonts/#propdef-font-size, die besagt, dass:

    Beachten Sie, dass bestimmte Glyphen Bluten können außerhalb Ihrer EM-box.

    Dies geschah in unterschiedlichem Maße mit verschiedenen Schriftarten, die ich ausprobiert (einige Bluten, sowohl X/Y, einige in die eine Richtung, manche gar nicht).

    Ich bin nicht sicher, ob es irgendeinen Weg gibt, um dieses Verhalten zu ändern, vor allem, da jeder browser kann einen anderen Algorithmus verwenden, die für anti-aliasing, das können Sie leicht ändern Sie die Kante des Charakters.

    Ich denke line-box-contain: glyph relevant sein können, aber ich sehe nur erwähnte es in einem editor ' s draft und ich bin mir sicher, dass browser-Unterstützung ist nicht vorhanden/inkonsistent.

    http://dev.w3.org/csswg/css3-linebox/#line-box-contain

    • Ich würde generell empfehlen die Vermeidung zitieren instabil EDs, es sei denn, Sie sind die einzig verfügbare oder die meisten relevanten Ressourcen. Betrachten Sie die weniger Häufig geändert WD w3.org/TR/css3-values/#font-relative-lengths oder noch besser die stable-Empfehlung w3.org/TR/CSS21/syndata.html#length-units Obwohl die em-Einheiten sind wahrscheinlich nicht zu ändern, für immer, es ist immer noch eine gute Idee, um die Verknüpfung zu Ressourcen, die sind stabiler 🙂
    • Aktualisiert Eure links. Danke.
    • Ich verstehen was em bedeutet. Die Sache ist die, dass die Schrift scheint größer zu sein, als 60px da es überschneidungen in der zweiten Zeile. Ich bearbeitet meine post.
    • sorry für das tutorial, dann...es war nicht klar aus deinem ersten post, was Sie wollte. Das rendering scheint zu variieren, basierend auf den Schriften; einige render leicht vertikal außerhalb der box, einige horizontal. Ich bin mir nicht sicher, ob es eine bessere Erklärung als die font-Größen nicht genau entsprechen, das Feld sollen Sie (tun ein wenig Forschung).
    • Vielen Dank für deine updates, Es scheint ein browser-system-Problem, vielleicht auf dem mac ist die Schrift ein bisschen anders und überschneidungen... Das nervt! 🙁
    • dein CSS würde abholen Helvetica auf einem Mac, der hat wohl eine andere box als Arial (die würde abgeholt werden von den meisten PCs, und warum ich nicht das problem sehen). Trebuchet MS eigentlich war für mich das beste auf dem PC (vollständig von der box). Es ist eine Kombination, von der font-definition und browser-rendering.
    • Vielen Dank für Eure Antworten, es scheint, dass Es keine Magische trick, wie "font-rendering: fit-em-box;"...

    InformationsquelleAutor Tim Medora
  2. 1

    Erhöhen Sie die Zeilenhöhe in CSS

    line-height: 2em; (Von 1 bis 2em)

    Ist in der p element.

    InformationsquelleAutor Legolas Greenleaf
  3. 0

    Können Sie Ihren "test" - Klasse line-height oder margin-top was auch immer Sie sich wohl fühlen.

    .test{
    font-size: 14px;
    line-height:18px;
}
    • Das macht mein problem nicht lösen. Ich brauche die Schrift genau in der em-box, wenn ich richtig für chrome auf dem mac, die line-height zu groß für eine andere Plattform (chrome auf windows oder firefox auf dem mac zum Beispiel)
    • vielleicht können Sie versuchen, Angabe von margin-top auf die test-Klasse. jsfiddle.net/3WcMG/12
    InformationsquelleAutor Mak
  4. 0

    Die Standard-Linie ist die Höhe, relative Größe, 150% der Schriftgröße in p zum Beispiel. Wenn Sie ändern der Zeilenhöhe mit em oder %, die von Browsern interpretiert wird, der als "em/% im Vergleich zu der Schriftgröße."

    http://jsfiddle.net/P7LaP/

    <div class="small">
    <p>Normal pq</p><br/>
    <p class="short">Short pq</p><br/>
    <p class="tall">Tall pq</p><br/>
</div>
<div class="normal">
    <p>Normal pq</p><br/>
    <p class="short">Short pq</p><br/>
    <p class="tall">Tall pq</p><br/>
</div>
<div class="large">
    <p>Normal pq</p><br/>
    <p class="short">Short pq</p><br/>
    <p class="tall">Tall pq</p><br/>
</div>

    Beispiel hat drei Gruppen von drei p-tags mit normaler Höhe, kurz und hoch. Während der drei Gruppen sind die Größe der schriftart.

    p {
    color: ffffff;
    background: #777777;
}
.short { line-height: 1em; }
.tall { line-height: 2em; }
.small { font-size: 8px; }
.normal { font-size: 16px; }
.large { font-size: 32px; }

    Ich hoffe, das hilft. Ich bin mir nicht sicher, was genau Sie zu tun versuchen, aber es sieht aus wie Sie sollten, löschen Sie einfach die line-height-Zeile aus der stylesheet.

    InformationsquelleAutor Steven Lacks
Schreibe einen Kommentar