Wie man den CSS-Leading richtig einstellt

Ich habe eine Situation, in der ich versuche, herauszufinden, wie ich die richtig verwende und einstelle, css leadingwenn wir so etwas haben:

Auch wenn das line-heightgleich ist, sehen die ersten beiden Zeilen ziemlich weit voneinander entfernt aus. Dagegen schauen Zeile 2 und 3 genauer hin. Ist es jedoch in Ordnung, unterschiedliche benutzerdefinierte line-heightWerte zu verwenden, um einen gleichmäßigen visuellen Abstand zwischen den Zeilen zu schaffen? Vielen Dank.

Ihre Grundlinien, die Sie gezeichnet haben, sind nicht gerade. Die Zeilenhöhe ist tatsächlich. Dass eine Linie Unterlängen hat und der Rest nicht, ist eine kleine optische Täuschung.
stimmt, es geht um optische Täuschung, darum geht es. Die Zeilenhöhe ist für den gesamten Absatz gleich.

Antworten (3)

Es gibt verschiedene Möglichkeiten, dies zu beantworten.

Rein aus Sicht des visuellen/grafischen Designs können Sie Ihren Text so positionieren, wie Sie es für richtig halten, damit er gut aussieht. Oft müssen wir die Typografie per Hand optisch anpassen, damit sich die Dinge richtig „anfühlen“, auch wenn sie mathematisch falsch sind.

Technisch hängt es vom Kontext Ihres Markups ab. Wenn dies ein Absatz ist, dann nein, es gibt keine wirkliche Möglichkeit, jeder Zeile innerhalb eines Absatzes eine eigene Zeilenhöhe zu geben, da es keine Möglichkeit gibt, vorherzusagen, welcher Text in einer Zeile enthalten sein wird. Der Zeilenumbruch kann von System zu System/Browser zu Browser/Benutzer zu Benutzer variieren. Der Grund dafür ist, dass Sie keine absolute Kontrolle über den Typ einer Person innerhalb des Browsers haben. Betrachten Sie Webdesign als „Vorschlagen“ eines Layouts, aber nicht als Diktieren.

Der Grund, warum Sie keine absolute Kontrolle haben, liegt darin, dass es viele Versionen von Schriftarten gibt, sodass eine Person möglicherweise eine Version hat, die etwas andere Metriken als eine andere hat. Darüber hinaus haben Betriebssysteme und Webbrowser alle Standardeinstellungen – einschließlich der Schriftgröße – die Benutzer nach Belieben ändern können, um sie an ihre eigenen Bedürfnisse anzupassen.

Angesichts all dessen wird es normalerweise ziemlich unpraktisch sein, dies zu tun.

Es gibt jedoch Zeiten, in denen es funktioniert. Wenn es zum Beispiel 3 kurze Linien sind, mit viel Platz auf jeder Seite, um sich bei Bedarf zu erweitern, dann probieren Sie es aus. Da die Zeilenhöhe an diesem Punkt jedoch für ein Element als Ganzes gilt, müsste jede Textzeile in ein eigenes Element auf Blockebene eingeschlossen werden. An diesem Punkt könnten Sie also Zeilenhöhe, Polsterung oder Rand oder eine beliebige Kombination verwenden, um Ihren Abstand zu optimieren.

Sicher, es ist vollkommen akzeptabel. Es gibt keine Regel, die besagt, dass Sie es nicht dürfen.

Abgesehen davon sind die beiden Dinge, die Sie am meisten berücksichtigen müssen, folgende:

  1. Reaktionsfähigkeit - Wenn der Bildschirm oder die Containergröße zu klein ist, kann ein Teil des Textes in die nächste Zeile verschoben werden, was das gesamte Styling durcheinander bringt.

  2. Späteres Ändern von Text - Wenn der Text zu einem späteren Zeitpunkt in etwas Neues geändert wird, würde das spezifische Styling, das für diesen Buchstabensatz angewendet wird, möglicherweise das Aussehen des neuen Textes durcheinander bringen. Es könnte zu nah oder zu weit auseinander sein usw.

Die Frage sollte lauten: Lohnt es sich? Es hängt von der Situation ab, aber meiner Erfahrung nach war die Antwort oft nein .

Vielen Dank für Ihre schnelle Antwort, in meinem Fall wird der Text für immer derselbe sein :) es geht um einen Absatz, der für immer dort auf der Seite bleiben wird. Apropos Reaktionsfähigkeit: Die Seite ist nicht für Handy-/Tablet-Bildschirme geeignet.
@typo_78 Wenn es sich um einen Absatz handelt, können Sie nicht jeder Zeile eine separate Zeilenhöhe zuweisen, da Sie den Zeilenumbruch nicht vorhersagen können.
@ DA01 Ich denke, er lässt Wrapper zu, was bedeutet, dass jede Zeile von einem eigenen Element umgeben ist. Könnte p > span-Beziehungen sein
Es wird ein kurzer Absatz (ein paar Zeilen) mit einer Schriftgröße von etwa 35-40 Pixel sein, wie wir es im gezeigten Beispiel in einer Spalte platziert haben. Jede Linie wird separat <p> ... </p >mit unterschiedlichen Linienhöhenwerten erstellt. . Zeilenumbrüche können auftreten, wenn die Seite auf kleine Größen geändert wird und für die Spalte eine reaktionsfähige Option eingestellt ist, richtig? aber es ist nicht mein Fall
Technisch gesehen können @ZachSaucier- pTags keine untergeordneten Blöcke enthalten. Aber egal, das Problem ist nicht das Markup – es ist, dass man keine wirkliche Kontrolle über die Schriftarten in einem Endbenutzer-Browser hat. System-, Benutzer- und Browsereinstellungen können alle Dinge so ändern, dass sie durch manuellen Zeilenumbruch Chaos anrichten. Wenn wir über eine Überschrift sprechen, sicher, aber wenn wir über Textabschnitte sprechen, ist dies keine praktische Lösung.
@typo_78 Wenn jede Zeile tatsächlich ein Absatz ist, kann das funktionieren, obwohl ich wahrscheinlich pstattdessen nur bei den Einstellungen für Rand und Auffüllen bleiben würde.
Und um es klar zu sagen, Zeilenumbrüche können einfach durch Betrachten der Seite auf zwei verschiedenen Systemen erfolgen. Nicht jeder hat möglicherweise genau die gleiche Schriftart installiert. Nicht jeder hat die gleichen Standardeinstellungen für die Schriftgröße. Viele Leute ändern die Einstellungen für die Schriftgröße usw.
Verstanden :) In meinem Fall ist es eine Überschrift, und die Schriftart wird auf den Server hochgeladen, die Site wird diese Schriftart verwenden, also denke ich, dass jeder diese Nachricht in der gleichen Form sehen wird, richtig?
@typo_78 ja, das ist sicher sicherer. Die meisten Leute werden die Schriftart sehen (es sei denn, sie haben diese Option im Browser zum Herunterladen von Schriftarten deaktiviert), aber die Größe kann immer noch geändert werden. Als Überschrift haben Sie jedoch wahrscheinlich „Spielraum“, also sollten Sie in Ordnung sein, solange Sie ihr diesen Raum geben.
In Bezug auf die Standardeinstellungen für die Schriftgröße verwende ich daher Absatzstile, um eine Reihe von Eigenschaften zu definieren, darunter ( font-family, font-style, font-weight, font-size, text-align, line-height, letter-spacing...)

Sie können jede Zeile als eigene Zeile trennen und die Zeilen dann nach Belieben bearbeiten. Dies könnte immer noch Probleme verursachen, aber Sie können die Zeilen verschieben, wenn Sie fragen.

Wie man den CSS-Leading richtig einstellt
AntwortenHierDatenschutz-Bestimmungen1y, 0v