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!