DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die Eigenschaft letter-spacing steuert den Abstand zwischen jedem Buchstaben in einem bestimmten Element oder Textblock. Von letter-spacing unterstützte Werte sind schriftenbezogene Werte (em, rem), absolute Werte (px) und die Eigenschaft normal, die auf die Standardeinstellung der Schrift zurückgesetzt wird.
Die Verwendung schriftenbezogener Werte wird empfohlen, damit sich letter-spacing angemessen erhöht oder verringert, wenn die Schriftgröße geändert wird, sei es durch Design oder durch Benutzerverhalten.
p {
letter-spacing: 0.0625em;
}Der wichtigste Punkt, der bei der Verwendung von letter-spacing zu beachten ist, ist, dass der angegebene Wert den Standardwert *nicht* ändert – er wird zum Standardabstand *hinzugefügt*, den der Browser anwendet (basierend auf den Schriftmetriken). letter-spacing unterstützt auch negative Werte, die das Erscheinungsbild des Textes straffen und nicht lockern.
Syntax
letter-spacing: normal | <length>- Anfangswert:
normal - Gilt für: Inline-Boxen und Text
- Vererbt: ja
- Prozentwerte: n/v
- Berechneter Wert: eine absolute Länge
- Animationstyp: nach berechnetem Werttyp
Werte
/* Keyword value */
letter-spacing: normal;
/* <length> values */
letter-spacing: 1px;
letter-spacing: .25em;
letter-spacing: .3rem;
/* Global values */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: revert;
letter-spacing: revert-layer;
letter-spacing: unset;Bemerkenswert…
- Subpixelwerte: In den meisten Browsern führt die Angabe eines Wertes, der sich zu weniger als
1pxberechnet, dazu, dass keinletter-spacingangewendet wird. - Die Eigenschaft
letter-spacingist mit CSS-Übergängen animierbar. - Eine der Möglichkeiten, den Abstand zwischen Inline-Block-Elementen zu bekämpfen, ist die Einstellung von
letter-spacing: -4px;für den übergeordneten Container von Inline-Block-Elementen. Sie müssen dannletter-spacing: normal;für die untergeordneten Elemente zurücksetzen. - Es ist selten oder nie eine gute Idee, Kleinbuchstaben mit Buchstabenabstand zu versehen.
Browser-Unterstützung
Diese Browser-Unterstützungsdaten stammen von Caniuse, wo weitere Details zu finden sind. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 30 | 2 | 9 | 12 | 6.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 4.4 | 4.0-4.1 |
Es sieht so aus, als ob Subpixel-Letter-Spacing es in Chrome geschafft hat. Ich weiß nicht, welche Version hinzugefügt wurde, aber es funktioniert ab 30.0.1599.101. Leider ist es spezifisch für die Blink-Engine (nicht WebKit), daher funktioniert es in Safari immer noch nicht (zumindest ab 6.0.5; ich muss es auf 7/Mavericks testen, wenn ich nach Hause komme).
Da Chrome, IE und Firefox es alle unterstützen, ist es zu diesem Zeitpunkt ziemlich standardisiert, was großartig ist. Der Unterschied zwischen 1px und 0,5px bei kleinen Schriftgrößen ist riesig.
Kleiner Kommentar.
SVG-Unterstützung für Firefox für letter-spacing und word-spacing ist immer noch nicht vorhanden, es gibt einen bekannten Fehler.
https://bugzilla.mozilla.org/show_bug.cgi?id=371787
„Es ist selten oder nie eine gute Idee, Kleinbuchstaben mit Buchstabenabstand zu versehen.“
Ich frage mich nur, warum Sie das sagen, können Sie gute/schlechte Beispiele geben? Was ist mit Überschriften in Kleinbuchstaben?
Danke
Vielleicht erwähnenswert: Kürzlich bin ich auf die Erfahrung gestoßen, dass „letter-spacing“ den Innenabstand des Elements beeinflusst. Ich war mir nicht bewusst, dass es das tun sollte. Dies ist das CSS, das ich verwende; ich hoffe, ich verwechsle das Problem nicht mit etwas anderem.
Ich habe auch dieses Problem. Letter-spacing scheint am Ende des Wortes nach rechts einen kleinen Abstand hinzuzufügen. In Bezug auf das Boxmodell ist es das Element selbst (d. h. nicht Margin oder Padding), das ein Problem darstellt.
Würde box-sizing: border-box; das Problem lösen?
Ich bin gerade auf ein ähnliches Problem gestoßen.
Ich habe ein wenig getestet und es scheint, dass der letzte Buchstabe auch den Buchstabenabstand erzeugt, der zu dem visuellen Ungleichgewicht im Layout führt.
Ich habe diesen einfachen Workaround gefunden, um die Dinge zu korrigieren
h2 {
font-family: ‘Oswald’, sans-serif;
font-size: 1.25em;
text-transform: uppercase;
color: #dca013;
font-weight: 300;
letter-spacing: 1em;
padding: 0 0 0 1em; /* gleicht den zusätzlichen Abstand aus */
}
(obwohl mein Instinkt sagt, es sollte .5em sein)
Ich bin über eine Google-Suche nach letter-spacing hierher gekommen. Chris' Hack scheint gut zu funktionieren!
Chris' Lösung hat bei mir nicht funktioniert, da ich auch einen Rand um meinen Text (einen Button) hatte – also habe ich stattdessen einen „Texteinzug“ mit diesem CSS-Code hinzugefügt: text-indent: 15px; Ersetzen Sie die 15px natürlich durch den Wert Ihres Buchstabenabstands. Funktioniert hervorragend.
Denken Sie daran, (insbesondere negativen) Buchstabenabstand in verschiedenen Browsern zu testen. Firefox und Chrome rendern unterschiedlichen Textabstand ziemlich unterschiedlich : (
Ich bin mir nicht sicher, ob schriftenbezogene Werte für Letter-Spacing funktionieren. Ich versuche herauszufinden, wie ich die Buchstabenabstände einer Textzeile an die Breite ihres Containers anpassen kann, und ein Prozentsatz funktioniert nicht. Irgendwelche Tipps? (Ich muss vielleicht auf JavaScript zurückgreifen, um es zu lösen.)
Vielleicht eine Kombination aus text-align: justify und letter-spacing?
Nun, das Problem dabei ist, dass, wenn der Buchstabenabstand statisch ist, er die Fähigkeit verliert, wirklich reaktionsfähig auf die Breite des Containers zu reagieren. Ich habe jeden Buchstaben in ein eingeschlossen und jedem Zeichen eine Breite von 4 % zugewiesen. (Es gibt 25 Zeichen = 100 % Breite). Funktioniert soweit ganz gut. Allerdings verliere ich den SEO-Vorteil für diese Wortgruppe. Ich nehme an, ich kann JavaScript verwenden, um jedes Zeichen beim Laden der Seite mit einem zu umschließen, um den Vorteil wiederzuerlangen.
Ups, es scheint, dass das Wort „span“, das mit „Kleiner als“ und „Größer als“-Symbolen umschlossen ist, in meinem letzten Kommentar entfernt wurde. Das ist es, was ich bekomme, wenn ich nicht vor dem Posten vorschau. Jedenfalls habe ich jeden der Buchstaben mit einem „span“ umschlossen.
Da DirectWrite seit Chrome 37 für alle aktiviert ist, unterstützt Chrome jetzt auch Subpixelwerte für Letter-Spacing und Schriftgröße. Derzeit können Endbenutzer DirectWrite jedoch in chrome://flags deaktivieren, wenn sie dies wünschen.
„Der wichtigste Punkt, der bei der Verwendung von letter-spacing zu beachten ist, ist, dass der angegebene Wert den Standardwert nicht ändert, sondern zum Standardabstand hinzugefügt wird, den der Browser anwendet.“
Pedantisch, aber ich denke, es wäre besser zu sagen „ersetzt nicht den Standard“, anstatt „ändert nicht den Standard“.
Weiß jemand, was 100 A/V oder 200 A/V in InDesign dem CSS oder WordPress entspricht? Ich versuche, mit meiner Programmiererin zu kommunizieren, und sie sagt, sie versteht keine 100 oder 200 A/V. Ich muss ihr die Zahlen in WordPress-Sprache geben.
Jemand?
Danke!!!
Vielen Dank für die Hilfe.