CSS -Eigenschaften zur Steuerung der Web -Typografie

Key Takeaways

• CSS -Eigenschaften ermöglichen eine präzise Manipulation der Web -Typografie, die die reiche Tradition der Drucktypografie widerspiegelt und gleichzeitig den einzigartigen Aspekten der Webmedien entspricht.
• Die Eigenschaft "text-transform" in CSS ermöglicht die Manipulation des Buchstabens, das Optionen wie "Capitalize", "Großbuchstaben", "Kleinbuchstaben" und "Full-Width" bietet, die jeweils unterschiedliche Designanforderungen bedienen.
• White Space Management in HTML Verschiedene Formatierungsszenarien.
• Um die Zeile zu steuern, bricht in Wörtern die Wörter, CSS liefert neben der Eigenschaft "Hyphens" die Eigenschaft "Word-Wrap" oder "Überlauf-Wrap" mit "Normal" und "Break-Wort" -Optionen, neben der Eigenschaft "Hyphens" für die Hyphenationskontrolle.
.
cs
• Fortgeschrittene Textausrichtung und -Interventation werden durch Eigenschaften wie "Text-Align", "Text-Align-Last" und "textindent" behandelt, wodurch Designer eine feinkörnige Kontrolle über Textpräsentation erhalten.

Web Typografie hat den Vorteil, dass sich die Fülle von Wissen zur jahrhundertealten Tradition der Drucktypographie anzieht. Aus dem gleichen Grund hat diese Tradition die Standards für Best Practices und Exzellenz mit sich, die die Web -Typografie auffordert.

Das Web als Kommunikationsmedium ist jedoch mit eigenen Besonderheiten verbunden. So sehr, dass wir glauben, dass ein nahtloser Wechsel vom Druck zur Web -Typografie ein schwieriger Anruf ist. In seinem Buch über Web Typografie, S.110, erklärt Jason Santa Maria:

gedruckte Bücher sind ein statisches Format. Von der anfänglichen Layout des Buches durch den Designer bis zur Reise zum Pressebett, dem Lagerhaus, dem Bücherregal und Ihren Händen ändert sich die Ausgabe dieses Buches nicht. Es wird genau so geliefert, wie der Designer es konzipiert hat.

Wenn es um das Web geht, kann die gleiche Site je nach einer Reihe von Faktoren, z. B. verschiedenen Arten von Geräten, Bildschirmauflösungen, personalisierten Browsereinstellungen usw., sehr unterschiedlich erlebt werden. Einige dieser Faktoren, wie Jason weiter erklärt…

… kann uns den Eindruck erwecken, dass der Typ zu klein ist, andere können dazu führen, dass wir etwas Wichtiges direkt außerhalb des Bildschirms verpassen, und noch andere machen es fast unmöglich, die Webseite überhaupt anzusehen.

, so heißt es, es ist auch wahr, dass "das Web der beste Ort für Text ist", wie Tim Brown in seinem Vortrag über die universelle Typografie behauptet. Text im Internet kann "gesucht, kopiert, übersetzt, mit anderen Dokumenten verknüpft und gedruckt werden, es ist bequem, er ist zugänglich".

Die Flexibilität des Webs bedeutet nicht, die Kontrolle aufzugeben. Im Gegenteil, als Webdesigner wird immer noch erwartet, dass wir fundierte Entscheidungen über alles treffen, was wir in unsere Arbeit einfügen, und Text ist keine Ausnahme. Die Art und Weise, wie Textelemente festgelegt sind, ihre Farbe, Größe, Schrift, all dies und mehr die Kernnachricht und Marke einer Website kommunizieren.

Um das Erscheinungsbild von Text im Web zu manipulieren, ist unser primäres Tool der Wahl CSS.

Die CSS -Eigenschaften, die ich in diesem Beitrag präsentieren werde, finden Sie in der CSS -Textmodulspezifikation.

Dieses Modul beschreibt die Typen -Steuerelemente von CSS; Das heißt, das
Merkmale von CSS, die die Übersetzung des Quelltextes auf
steuern formatiertes, zeilenverpacktes Text.

Mit anderen Worten, das CSS -Textmodul befasst sich mit der Anzeige von Zeichen und Wörtern im Browser und wie sie verteilt, ausgerichtet, beigebracht usw. unter Verwendung von CSS.

Was eine grundlegende Text- oder Worteinheit ausmacht, und wo genau ein Wort in einem bestimmten Textstück einbrechen darf, hängt erheblich von den Regeln der Sprache ab, die auf einer Website verwendet wird. Aus diesem Grund ist es wichtig, diese Informationen im HTML -Dokument zu deklarieren (normalerweise im Lang -Attribut des -Elements).

Hier werde ich die folgenden zwei Themen nicht diskutieren:

• Schriftarten, dh die visuellen Darstellungen von Zeichen, d. H. Glyphen und ihre Eigenschaften;
• Merkmale von CSS im Zusammenhang mit der Textdekoration wie Untersteiner, Textschatten und Schwerpunkte.

Wenn Sie neugierig sind, finden Sie die neueste Dokumentation zu Schriftarten und Textdekorationseigenschaften in den CSS -Schriftarten Modul Level 3 bzw. im CSS -Textdekorationsmodul Level 3.

MANIPULING LETTERSCHAFT

Es kann Zeiten geben, in denen Textelemente in Großbuchstaben angezeigt werden müssen, beispielsweise zuerst und nach dem Nachnamen. CSS gibt uns die Kontrolle über den Buchstaben mit der Texttransformeigenschaft.

Der Standardwert der Texttransformeigenschaft ist keine, dh kein Einfluss auf den Buchstabenfall wird angewendet.

Der Kapitalizewert

Wenn Sie möchten, dass der erste Buchstabe jedes Wortes in Großbuchstaben angezeigt wird, während das Erscheinen aller anderen Buchstaben nicht betroffen ist (unabhängig von ihrem Fall im HTML

Die HTML:

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

Die CSS:

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

Beachten Sie, wie Kapitalisierung nicht den Titelsfallkonventionen folgt: Tatsächlich erscheinen alle ersten Buchstaben im obigen Beispiel aktiviert, einschließlich des Wortes "in". Autoren, die beabsichtigen, einer literarischen Konvention zu Titeln zu folgen, müssen die Buchstaben manuell im Quelltext manipulieren.

Der Großbuchstaben

Wenn Ihr Ziel darin besteht, alle Buchstaben in Großbuchstaben anzuzeigen, unabhängig von ihrem Fall im HTML -Dokument ist der Großbuchstaben der entsprechende Wert:

Die HTML:

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

Die CSS:

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

Der Kleinbuchstaben -Wert

Verwenden des Werts von Wertgebern führt dazu, dass alle Buchstaben in Kleinbuchstaben angezeigt werden. Dies wirkt sich natürlich nicht auf das Erscheinungsbild von Buchstaben aus, die im ursprünglichen Quelldokument bereits Kleinbuchstaben sind.

Die HTML:

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

Die CSS:

<span>h2 {
</span>  <span>text-transform: uppercase;
</span><span>}</span>

Der volle Breitenwert

Die Spezifikation hat einen neuen Wert hinzugefügt, Vollbreite. Dieser Wert beschränkt das Charakter auf ein Quadrat, als wäre es ein ideografischer Charakter, z. B. Japanisch, Chinesen usw. Dies erleichtert die Ausrichtung von lateinischen Zeichen mit ideografischen Zeichen.

Nicht alle Zeichen haben eine entsprechende Form in voller Breite. In diesem Fall werden Zeichen nicht vom Wert voller Breite beeinflusst.

Die HTML:

<span><span><span><h2</span>></span>Alice's Adventures in Wonderland<span><span></h2</span>></span></span>

Die CSS:

<span>h2 {
</span>  <span>text-transform: lowercase;
</span><span>}</span>

So sehen Charaktere in Firefox aus, wenn die vollständige Breite angewendet wird:

Weitere Bemerkungen

Browserunterstützung für die SMSFORM-Eigenschaft ist ausgezeichnet. In der Tat unterstützen alle wichtigen Browser es.

Die einzige Ausnahme ist der Wert voller Breite, der derzeit nur in Firefox funktioniert. Angesichts der Wahrscheinlichkeit, dass die volle Breite in der Empfehlungsphase der Kandidaten ausgesetzt ist, ist dies möglicherweise verständlicherweise, da die Vollbreite gefährdet ist.

ferner habe ich eine kleine Inkonsistenz zwischen Firefox (V.39) und anderen wichtigen Browsern bei der Erbringung des Kapitalizemittelwerts auf einem beigebrochenen Wort bemerkt.

So sieht es in Firefox aus:

Beachten Sie, wie der erste Brief nach einem Bindestrich nicht aktiviert wird. Auf der anderen Seite ist unten der gleiche Text, der in Chrom angezeigt wird:

In diesem Fall sind Buchstaben nach einem Bindestrich keine Ausnahme; Sie werden auch mit einem Großbuchstaben angezeigt. Ich habe das gleiche Verhalten in der neuesten Veröffentlichung aller anderen großen Browser beobachtet, außer wie oben erwähnt, Firefox.

Mach dich endlich um die Kaskade! Wenn Sie die SMSFORM-Eigenschaft auf ein Containerelement einstellen, wird ihr Wert durch alle Kinderelemente geerbt. Um unerwünschte Ergebnisse zu vermeiden, setzen Sie den texttransformierenden Eigentumswert der untergeordneten Elemente auf keine zurück.

Eine Demo für die Eigenschaftswerte der Texttransformation anzeigen

.

wie man mit White Space umgeht

Wenn Sie die Registerkarte Taste, die Space -Taste drücken oder einen Text zum Brechen in die nächste Zeile erzwingen Dokument. standardmäßig kollabieren Browser Sequenzen von Weißraum in einen einzelnen Raum, Linienbrüche werden entfernt und Textzeilen, die ihren Container entsprechen. Dies ist für uns praktisch, da wir es uns ermöglichen, Textbrocken einzusetzen und zu trennen

Was ist jedoch, wenn dies nicht Ihr Ziel ist? Nehmen wir beispielsweise an, Sie möchten den White -Raum, den Sie im HTML -Dokument erstellen, bewahren möchten. Ein häufiges Szenario ist, wenn Sie einen Text schreiben, der als ordnungsgemäß eingerechtigter Code -Snippet angezeigt wird. Oder Sie möchten, dass ein Text in einer Zeile ohne Brechen angezeigt wird.

In solchen Gelegenheiten, wenn Sie beabsichtigen, das Standardverhalten des Browsers zu überschreiben, bietet die White-Space-Eigenschaft einige interessante Optionen.

Das normale Schlüsselwort setzt den Browser auf sein Standardverhalten zurück: Der gesamte zusätzliche Weißraum wird in ein Zeichen und die Linien einrastet, wenn sie die Kante ihres Behälters erreichen.

Der Pre -Wert

Mit dem Pre -Keyword können Sie Text anstellen, indem Sie alle weißen Räume erhalten und neue Zeilen im Quelldokument erzwingen. Der Text wird beim Überfließen des Containers nicht in eine neue Zeile eingewickelt.

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

Wenn Sie Registerkarten zum Erstellen von Weißraum verwenden, können Sie ihre Größe mit der Registerkarteneigenschaft steuern, indem Sie ihn auf einen Ganzzahlwert einstellen.

Registerkartegröße ist eine Eigenschaft mit inkonsistenter Browser-Unterstützung

Der Pre-Wrap-Wert

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

Nehmen wir an, Sie möchten, dass der White -Space im Quelldokument im Browser -Display erhalten bleibt. Sie möchten jedoch auch die Linien einwickeln lassen, wenn sie die Kante ihres Behälters erreichen.

Das Schlüsselwort vor der Wrap hilft Ihnen, das gewünschte Ergebnis zu erzielen.

Beachten Sie, wie jede im Browser angezeigte Zeile die erzwungenen Pausen im Quellcode widerspiegelt, obwohl der Container viel Platz für mehr Text hat:

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

Verkleinern Sie jedoch Ihren Browser -Bildschirm und Sie werden feststellen

Der Wert vor der Leitung

Ein endgültiger interessanter Wert für die weiße Eigenschaft ist vor der Leitung. In dem Maße, in dem es Raumsequenzen in einen Raum kollabiert und ein Verpacken ermöglicht, verhält es sich wie normal. Wenn jedoch im HTML -Dokument ein neues Zeilenzeichen oder ein
Tag vorhanden ist, werden diese im Browser -Display erhalten.

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

Probieren Sie die Codepen-Demo für die Schlüsselwörter vor, vor der Wrap und vor der Linie aus.

Der Nowrap -Wert

nowrap ist vielleicht der bekannteste Weißraumwert. Benötigt Ihr Design, dass ein Stück Inline -Inhalt niemals einwickeln sollte? Mit weißem Raum: nowrap; In Ihrem Element macht der Trick.

Louis Lazaris verweist auf den folgenden Anwendungsfall für diesen Wert.

oben befindet sich ein Link, gefolgt vom »Symbol. Wenn dieser Charakter beispielsweise in flüssigen Weblayouts auf die nächste Zeile fallen lässt, wäre dies nicht wünschenswert.

unter diesen und ähnlichen Umständen (zum Beispiel an Symbole denken) ist der Nowrap -Wert ziemlich praktisch.

Ein weiterer interessanter Anwendungsfall wird uns von Sara Soueidan in der CSS -Referenz von Codrops zu uns gebracht. Sara weist darauf hin, dass die Eigenschaft aus Weißraum auf alle Inline-Inhalte, einschließlich Bilder, angewendet werden kann.

Es wird manchmal mit dem Wert Nowrap verwendet, um eine horizontale Liste von Bildern in einem scrollbaren Element zu erstellen, indem verhindern, dass die Bilder einwickeln und dazu zwingen, auf einer einzelnen Zeile in ihrem Container angezeigt zu werden.

Ich habe diesen Vorschlag vergrößert, indem ich ein grundlegendes jQuery-Karussell mit weißem Raum erstellt habe: nowrap. Hier ist die Demo:

Siehe den Stift mit der Word-Wrap-Eigenschaft auf einem Bildkarousel von SitePoint (@sinepoint) auf CodePen.

Kontrolle über Linienbrüche in Wörtern

Manchmal kommt es vor, dass ein Design aussieht, weil ein langes Wort nicht in die nächste Zeile wickelt und so seinen Behälter überfließt. Lange URLs oder einige vom Benutzer erstellte lange Wörter in Blog-Kommentaren sind allgemeine Szenarien.

Die folgenden CSS -Eigenschaften sollen uns ein gewisses Maß an Kontrolle über den Umgang mit langen Wörtern im Web geben.

Die Eigenschaft Word-Wrap/Overflow-Wrap-Eigenschaft

Die Überlauf-Wrap-Eigenschaft (zuvor als Word-Wrap bezeichnet, vollständig unterstützt und in allen wichtigen Browsern aus Legacy-Gründen arbeitet) wirkt sich in Kraft, wenn die weiße Eigenschaft eine Textverpackung ermöglicht. Es kann einen von zwei Werten haben: Normal und Breakwort.

Durch die Verwendung des Normalwerts brechen Wörter an zulässigen Bruchpunkten, z. B. Räume, Bindestriche usw.

Der Break-Word-Wert ermöglicht beliebige Bruchpunkte in einem Wort, wenn die Zeile an einem anderen akzeptablen Punkt sonst nicht gebrochen werden kann.

Das Bild unten zeigt die Anzeige eines langen Wortes, das seinen Container überläuft:

Setzen wir die Überlauf-Wrap-Eigenschaft und auch für alte Zwecke die Word-Wrap-Eigenschaft auf den Break-Word-Wert:

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

… und die Anzeige des Long Word ist jetzt in mehrere Zeilen unterteilt, um den verfügbaren Speicherplatz anzupassen.

Die Eigenschaft bei der Bindung

langen Wörtern aufbrechen ist alles gut und gut. Der resultierende Text könnte jedoch für die Leser verwirrend sein. Eine bessere Option ist es, das Wort zu hyphen, wenn es in die nächste Zeile bricht. Auf diese Weise ist es den Lesern sofort klar, dass sie sich ein Wort an mehrere Zeilen einwickeln. Um dies zu erreichen, bietet CSS die Eigenschaft bei Bindestrichen, die Sie in Verbindung mit Word-Wrap verwenden können: Break-Wort.

In

Insbesondere ermöglicht der automatische Wert der Eigenschaft bei Bindestrichen einen Bindestrich an dem Punkt, an dem Wörter in die nächste Zeile brechen, wenn die Sprachregeln des Dokuments dies zulassen oder bei der HTML -Quelle vorhanden sind. Damit dies funktioniert, stellen Sie sicher, dass Sie das Lang -Attribut auf Ihre gewünschte Sprache im HTML -Dokument festlegen:

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

Sie können auch die Anzeige von Bindestrichen verhindern. In diesem Fall stellen Sie die Eigenschaft bei den Bindestrichen auf keine:

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

Zusätzlich können Sie bei den Wörtern die Bindestriche online anmelden, wenn Wörter im Markup beigetragen werden und der Text in die nächste Zeile wickelt. Dies geschieht mit einem Wert des Handbuchs:

<span>h2 {
</span>  <span>text-transform: uppercase;
</span><span>}</span>

unterstützt durch die Präfixe von Anbietern ist die Browserunterstützung für die Eigenschaft bei der Bindung in allen wichtigen Browsern gut, wenn auch nicht ohne leichte Inkonsistenzen. Die neuesten Versionen von Chrome (V.44) und Opera (V.30) zum Zeitpunkt des Schreibens unterstützen den Eigenschaftswert automatisch nicht.

Zeigen Sie die obigen Beispiele auf CodePen

an

Raum zwischen Wörtern und Buchstaben

manipulieren

Was einen Text mehr oder weniger lesbar macht, hängt oft von einer Reihe von Faktoren ab. In einigen Fällen bringt das Erhöhen oder Verringern des Raums zwischen jedem Wort oder jedem einzelnen Buchstaben, d. H. Verfolgung , enorme Verbesserungen.

cs

Die Wortabstandseigenschaft

unten finden Sie die Werte für die Wortabstandseigenschaft:

• Normal
• Prozentsatz

Normal zeigt der Standardraum zwischen Buchstaben an. Die Menge an Platz hängt von der verwendeten Schriftart oder dem Browser ab.

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

Mit

können Sie zusätzlich zu dem von der Schriftart oder zum Browser definierten Standardabstand zwischen den Wörtern zusätzlich zum Standardabstand hinzufügen.

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

Prozentsatz funktioniert genauso wie , verwendet jedoch Prozentwerte. Ich habe keine Browser -Implementierung dafür gefunden, und Prozentsätze sind gefährdet, aus zukünftigen Entwürfen der Spezifikation entfernt zu werden.

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

Die Eigenschaftsabstandseigenschaft

Sie können die Eigenschaft der Buchstabenabteilung auf einen von zwei Werten einstellen: Normal oder .

Verwenden von normalen Blättern den Standard -Schriftabstand zwischen Buchstaben. Es setzt auch jede zuvor angegebene Buchstabenabstandslänge zurück, die in den Standardwert angegeben wurde. Wenn Sie beispielsweise einen Briefabstandswert von 1EM für ein übergeordnetes Element angeben, aber den Standardwert für untergeordnete Elemente anzeigen möchten, ist normal Ihr Freund.

<span>h2 {
</span>  <span>text-transform: uppercase;
</span><span>}</span>

Der Wert ist eine Messeinheit, z. PX oder EMS, wobei Sie den Abstand zwischen Buchstaben zusätzlich zum Standardabstand erhöhen können.

<span><span><span><h2</span>></span>Alice's Adventures in Wonderland<span><span></h2</span>></span></span>

Weitere Details

Wortabstand gilt nicht nur für Wörter. Sie können es auf jeder Art von Inline- oder Inline-Block-Inhalten verwenden.

Außerdem können Sie sowohl Wortabstand als auch Buchstabe animieren. Die Verwendung von CSS-Übergängen zum Buchstabenzustand zeigt jedoch, dass der Normalwert nicht durch die aktuelle Version von Firefox (v.39) erkannt wird. Um dies zu überwinden, ersetzen Sie einfach normal durch 0EM.

Hier ist eine Demo mit animierter Text mit Wortabstand und Buchstabenabstand:

Siehe den Stift, der die CSS-Buchstaben- und Wortabstandseigenschaften von SitePoint (@sinepoint) auf CodePen animiert.

Neueste CSS -Optionen für Textausrichtung

Die text-align-Eigenschaft gibt es schon seit einiger Zeit. Es steuert, wie Inline -Inhalte wie Text und Bilder in einem Blockbehälter ausgerichtet sind. Die Kewords links und rechts richten den Inhalt des Inhalts nach links und rechts aus. Das Einstellen von Text-ALLIRIGEN in die Mitte richtet den Inhalt auf die Mitte seines Containers aus. Schließlich rechtfertigt das Justify -Schlüsselwort den Inhalt so, dass jede Zeile von gleicher Länge ist (mit Ausnahme der letzten Zeile, wenn es nicht ausreichend ist, um den Rand seines Containers zu erreichen).

Die Spezifikation fügt zwei neue Werte hinzu, die auf internationalisierten Websites mit RTL-Sprachsystemen (Right-to-Links) sehr nützlich sein könnten: Start und Ende.

für Leser von links nach rechts (LTR) entsprechen sie links und rechts. Wenn eine Website eine RTL -Sprache verwendet, entspricht Start rechts und Ende links.

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

textausrichtung anwenden: Übereinstimmungselarm an ein Inline-Kinderelement stellt sicher, dass das Kind die gleiche Ausrichtung wie der Elternteil erbt. Der ererbte Start- oder Endwert wird mit der Sprachrichtung des Elternteils berechnet, was zu einer Ausgabe von links oder rechts führt.

Die text-align-last-Eigenschaft

Neu in CSS ist auch die textausrichtung längere Eigenschaft. Diese Eigenschaft kontrolliert die Ausrichtung der letzten Zeile von gerechtfertigt text vor dem Ende eines Absatzes oder vor einem
Tag. Es hat die gleichen Schlüsselwortwerte wie Text-Align, mit Ausnahme von Auto, was der Standardwert ist. Mit dem Autowert können Sie die letzte Textzeile entsprechend dem Wert der Text-Align-Eigenschaft des Elements ausrichten, falls festgelegt. Wenn keine text-align-Eigenschaft angewendet wird, stand der Text zu einem Wert von Start.

Zum Zeitpunkt des Schreibens ist die Browser-Unterstützung für Text-Align-Last ziemlich schlecht. Daher ist es meine Ansicht, dass es sparsam verwendet werden sollte, wenn überhaupt.

Eine Codepen -Demo anzeigen Sie diese Funktionen in Aktion

anzeigen

text

eingeleitet

Einrückung einer Textzeile, normalerweise der ersten Zeile in einem Absatz, ist nicht etwas, auf das Sie auf Websites oft stoßen. Stattdessen wird eine leere Linie als gemeinsames visuelles Trennungszeichen zwischen Absätzen platziert.

Dennoch wird manchmal ein klassisches Erscheinungsbild für bestimmte Designs erstellt, die die erste Zeile eines Absatzes einzurufen.

Wenn Ihr Design durch diese Technik verbessert wird, bietet CSS die textinische Eigenschaft an. Betrachten wir die möglichen Werte.

Ein Wert der Länge wird üblicherweise unter Verwendung von PX- oder EM -Einheiten festgelegt:

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

Ein Prozentsatz wird unter Verwendung eines prozentualen Wertes festgelegt:

<span>h2 {
</span>  <span>text-transform: uppercase;
</span><span>}</span>

Ein Wert jeder Zeile verankert das Erscheinungsbild der ersten Zeile in einem Blockbehälter sowie jede Zeile nach einem Zwangsleitungsunterbrechung, dh eine Linienbreite Einfügen eines
Tags in die HTML -Quelle. Die Anzeige der ersten Zeile nach einem weichen Wrap -Pausen, dh Text, die in die nächste Zeile umhüllt, um ihren Behälter anzupassen, ist jedoch nicht betroffen.

Ein Wert des Hängens verursacht alle Zeilen mit Ausnahme der ersten Zeile als eingerichtet.

Die jeweiligen und hängenden Werte sind experimentelle Werte, die zum Zeitpunkt des Schreibens noch in keinem Browser implementiert sind.

Sehen Sie sich diese Demo an, um textindent in Aktion zu sehen

Schlussfolgerung

CSS hat große Fortschritte bei der Manipulation von Webtext erzielt, obwohl mehr erwartet wird. Neben der skizzenhaften Browser -Unterstützung für einige der neuesten Eigenschaften wäre es schön, wenn CSS Kerning -Funktionen angeboten würde, d. H. Die Möglichkeit, den Abstand zwischen zwei Buchstaben in einem bestimmten Wort zu manipulieren.

In diesem Beitrag habe ich in eine Reihe von CSS -Eigenschaften eingeteilt, die Formatierung, Linienverpackung und Ausrichtung des Textes im Web steuern. Fühlen Sie sich frei, mit den Demos mit diesen zu experimentieren.

Ich freue mich auf Ihr Feedback!

häufig gestellte Fragen (FAQs) zu CSS -Eigenschaften zur Steuerung der Web -Typografie

Wie kann ich CSS -Eigenschaften verwenden, um die Web -Typografie zu steuern? Sie können die Schriftgröße, die Schriftfamilie, die Zeilenhöhe, die Textausrichtung, die Textfarbe und vieles mehr einstellen. Um beispielsweise die Schriftgröße zu ändern, können Sie die Eigenschaft „Schriftgröße“ verwenden und die Größe in Pixeln, EMS oder Prozentsätzen angeben. Um die Schriftfamilie zu ändern, können Sie die Eigenschaft „Schriftfamilie“ verwenden und den Schriftnamen angeben. Denken Sie daran, Fallback-Schriftarten aufzunehmen, falls die erste Wahl im System des Benutzers nicht verfügbar ist. 'Eigenschaft in CSS wird verwendet, um den Inline -Inhalt eines Blockelements auszurichten. Es kann Werte wie "links", "rechts", "Zentrum" oder "Rechtfertigung" erfordern. Zum Beispiel wird „Text-Align: Center“ den Text in seinem enthaltenden Element zentrieren. Diese Eigenschaft ist besonders nützlich, wenn Sie die Ausrichtung des Textes in Überschriften, Absätzen oder anderen texthaltigen Elementen steuern möchten.

Wie kann ich den Weißraum in CSS steuern? Die Eigenschaft von Weißraum in CSS wird verwendet, um zu steuern, wie weiße Räume in einem Element behandelt werden. Es kann Werte wie "Normal", "Nowrap", "Pre", "Pre-Line" oder "Pre-Wrap" erfordern. Zum Beispiel verhindert 'White-Space: Nowrap', dass der Text in die nächste Zeile einwickelt und den gesamten Text in einer einzelnen Zeile angezeigt wird. 🎜>

Um die Listenelemente links in CSS auszurichten, können Sie die Eigenschaft "Text-Align" mit dem Wert "Links" verwenden. Beispielsweise richtet "Text-Align: Links" die Listenelemente links aus. Dies ist die Standardausrichtung für die meisten Browser, aber die Angabe dieser kann dazu beitragen, die Konsistenz in verschiedenen Browsern zu gewährleisten. 'Eigenschaft in CSS wird verwendet, um den Raum zwischen Textlinien zu steuern. Sie können die Leitungshöhe in absoluten Einheiten wie Pixel, relativen Einheiten wie Prozentsätze oder unitlosen Zahlen angeben, die mit der aktuellen Schriftgröße multipliziert werden, um die Linienhöhe festzulegen. Beispielsweise setzt „Linienhöhe: 1.5“ die Leitungshöhe auf das 1,5-fache der aktuellen Schriftgröße.

Wie kann ich die Textfarbe in CSS ändern? Sie können die Farbe auf unterschiedliche Weise angeben, z. (Wie 'HSL (0, 100%, 50%)').

Wie kann ich Text in CSS fett machen? Die Eigenschaft in CSS wird verwendet, um Text fett zu machen. Sie können seinen Wert auf "BOLD" oder eine Zahl von 100 bis 900 in Vielfachen von 100 festlegen, wobei höhere Zahlen dem mutigen Text entsprechen. Zum Beispiel wird 'Schriftgewicht: BOLD' oder 'Schriftgewicht: 700' den Text fett machen. Die Eigenschaft in CSS wird verwendet, um den Text kursiv zu machen. Sie können seinen Wert auf "kursiv" festlegen, um den Text kursiv zu machen. Zum Beispiel wird „Schriftstil: Italic“ den Text kursiv melden.

Wie kann ich Text in CSS unterstreichen? Sie können seinen Wert auf "Unterstreich" festlegen, um den Text zu unterstreichen. Beispielsweise unterstreicht 'Text Decoration: Underline' den Text.

Wie kann ich den Buchstabenabstand in CSS steuern? der Raum zwischen Buchstaben. Sie können den Buchstabenabstand in absoluten Einheiten wie Pixeln oder relativen Einheiten wie EMS angeben. Beispielsweise erhöht „Buchstabe 0,1EM“ den Raum zwischen den Buchstaben um das 0,1-fache der aktuellen Schriftgröße.

Das obige ist der detaillierte Inhalt vonCSS -Eigenschaften zur Steuerung der Web -Typografie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!