Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie stelle ich den Buchstabenabstand in CSS ein? So legen Sie den Buchstabenabstand fest

青灯夜游
Freigeben: 2018-11-01 17:37:21
Original
5207 Leute haben es durchsucht

Der Inhalt dieses Artikels besteht darin, vorzustellen, wie man den Buchstabenabstand in CSS einstellt. So legen Sie den Buchstabenabstand fest. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Tatsächlich ist die Methode zum Festlegen des Buchstabenabstands in CSS sehr einfach. Sie müssen nur ein Attribut verwenden, nämlich das Buchstabenabstandsattribut.

Lassen Sie uns einen Blick auf das Attribut „letter-spacing“ werfen und sehen, wie es den Buchstabenabstand festlegt.

Das Attribut „letter-spacing“ steuert den Abstand zwischen den einzelnen Buchstaben (einzelnen Zeichen) innerhalb eines bestimmten Elements oder Textblocks. Zu den Werten, die den Buchstabenabstand unterstützen, gehören relative Längenwerte der Schriftart (em, rem), relative Werte des übergeordneten Elements (Prozentsatz), absolute Werte (px, Pixel) und normale Eigenschaften, die den Standardwert der Schriftart zurücksetzen Wert.

Es wird empfohlen, relative Schriftartwerte zu verwenden, damit bei Änderungen der Schriftgröße, sei es aufgrund des Designs oder des Benutzerverhaltens, der Buchstabenabstand entsprechend vergrößert oder verkleinert werden kann.

Werfen wir einen Blick auf die Verwendung des letter-spacing-Attributs:

p {
  /* 16 * 0.0625 = 1px */
  letter-spacing: 0.0625em;
}
Nach dem Login kopieren

Das Wichtigste bei der Verwendung des Attributs „letter-spacing“ ist, dass das angegebene Der Wert ändert nicht den Standardwert des Browsers und fügt stattdessen den vom Browser angewendeten Standardabstand hinzu (basierend auf Schriftartmetriken). Die Eigenschaft „letter-spacing“ unterstützt auch negative Werte, die das Erscheinungsbild von Text verkleinern, anstatt ihn aufzulockern.

Sehen wir uns die Auswirkung der Festlegung des Buchstabenabstandsattributs an:

Wie stelle ich den Buchstabenabstand in CSS ein? So legen Sie den Buchstabenabstand fest

Erklärung:

1. Subpixelwerte: In den meisten Browsern führt die Angabe eines Werts von weniger als 1 Pixel dazu, dass das Buchstabenabstandsattribut nicht angewendet wird. Derzeit unterstützen sowohl Firefox 14+ als auch IE 10 das Subpixel-Layout; Opera und WebKit unterstützen dies nicht.

2. Die Eigenschaft „Buchstabenabstand“ kann durch Festlegen von CSS-Übergängen animiert werden.

3. Eine Möglichkeit, den Leerraum zwischen Inline-Blockelementen zu beseitigen, besteht darin, den Buchstabenabstand auf den übergeordneten Container des Inline-Blockelements festzulegen. Setzen Sie dann den Buchstabenabstand: normal; für die untergeordneten Elemente zurück und fertig.

Werfen wir einen Blick auf die Kompatibilität des letter-spacing-Attributs

Wie stelle ich den Buchstabenabstand in CSS ein? So legen Sie den Buchstabenabstand fest

Hinweis zur Unterstützung mobiler Browser: einige Versionen von Opera Mobile , nicht standardmäßige WebKit-Kernel und NetFront-Browser unterstützen das Buchstabenabstandsattribut nicht. Für spezifische Inhalte besuchen Sie bitte den QuirksMode-Link, der oben detaillierte Anweisungen enthält.

QuirksMode-Linkadresse: http://www.quirksmode.org/m/table.html#t25

Zusammenfassung: Das Obige ist die in diesem Artikel vorgestellte Methode zum Festlegen des Buchstabenabstands in CSS . Ich hoffe, dass es für das Studium aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonWie stelle ich den Buchstabenabstand in CSS ein? So legen Sie den Buchstabenabstand fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage