Die signifikanteste Verbesserung Text in CSS3 ist @Schriftart

Mechanismus, die Sie definieren Ihre eigenen Schriftarten und verpacken sie mit Ihrer Website ermöglicht. CSS3 hat andere Textformatierung Tricks zur Verfügung, auch. Das Text-Takt und text-shadow Regeln können Sie interessante Transformationen auf Text in Ihren Seiten zu machen.

Beide Regeln werden verwendet, um Text zu schmücken, aber sie können die Lesbarkeit auswirken, so sollten Sie sie sorgfältig verwenden. Sie sind besser geeignet für größere Text (wie Schlagzeilen) als den Hauptinhalt Ihrer Website.

Text Schlaganfall

Mit CSS3, können Sie einen Strichfarbe für Ihren Text angeben. Dies definiert einen Umriss um den Brief. Sie können die Strichfarbe angeben sowie eine Strichbreite (unter Verwendung der normalen Größe Attribute) (eines der Standard CSS-Farbwerte verwenden).

Das Text-Takt Regel gilt diese Wirkung. Sie können sehen, es im Code verwendet:

Text Stroke Demo
Dieser Text hat einen Schlaganfall

Derzeit liegen keine Browser unterstützen die Text-Takt Attribut direkt, aber WebKit-basierten Browsern (Chrome und Safari) unterstützen die herstellerspezifische -webkit- Version. Ein Browser, der nicht die Regel nicht unterstützt wird einfach ignorieren, so sollte dies nicht ein wesentlicher Teil des Designs, bis Unterstützung vollständiger ist.

Text-Schatten

Schatten sind ein weiteres gemeinsames Merkmal der modernen Web-Designs. Schatten ein Element der Tiefe zu einer Seite hinzufügen, aber sie können auch die Lesbarkeit zu verbessern (wenn sie ordnungsgemäß verwendet wurden) eine Schlagzeile von der Seite zu heben. Das text-shadow Attribut war technisch Teil von CSS2, aber es ist erst vor kurzem von gängigen Browsern unterstützt.

Textschatten Demo
Dieser Text hat einen Schatten

Das Attribut hat vier Parameter:

• Offset-x: Legt fest, wie weit in den x (links, rechts) Achse der Schatten aus dem ursprünglichen Text sein wird. Ein positiver Wert bewegt den Schatten auf der rechten Seite, und ein negativer Wert bewegt sich nach links.

• Offset-y: Legt fest, wie weit in der y (oben-unten) Achse Schatten aus dem ursprünglichen Text sein wird. Ein positiver Wert bewegt den Schatten nach unten, und ein negativer Wert bewegt den Schatten auf.

• verwischen: Gibt den Verwischradius des Schattens. Wenn der Wert 0px ist, gibt es keine Unschärfe, und der Schatten sieht genauso aus wie der ursprüngliche Text. Im Allgemeinen werden Sie die Unschärfe-Wert in der Nähe der längsten Ihrer Offsets sein wollen. Dies ermöglicht es dem Schatten als Schatten des Textes erkennbar zu sein, ohne eine Ablenkung zu werden.

• Farbe: Legt die Schattenfarbe. Im allgemeinen wird ein dunkelgrau ist bevorzugt, aber Sie können auch andere Farben für Spezialeffekte versuchen. Beachten Sie, dass unscharfe Schattenfarbe aufzuhellen neigt. Wenn es eine große Unschärfe angewendet wird, kann die Schattenfarbe die gleiche Farbe wie der Text sein. Wenn der Schatten nicht viel verwischt werden, müssen Sie die Schattenfarbe, um die Lesbarkeit zu erleichtern.

Die Größe des Schattens wird indirekt mit einer Kombination von Offsets und Unschärfen bestimmt. Sie können sich für den Schatten Sie suchen experimentieren müssen, zu erhalten. Schatteneffekte sind am besten, wenn sie subtil sind, weil sie die Lesbarkeit beeinträchtigen können.

Ein Spezialfall der Text Shadowing kann verwendet werden, um Text vor dem Hintergrund Bild stehen zu helfen. Tragen Sie eine kleine Schatten einer Kontrastfarbe. Diese Technik wird häufig verwendet, wenn Sie Text auf einem Hintergrund haben müssen, da jeder Buchstabe seine eigene hohem Kontrast Hintergrund erzeugt. Auch hier sollten Sie nicht die Lesbarkeit aus Gründen der Design-Ethik zu opfern.

Alle neuesten Modell-Browser unterstützen den Text-Schatten-Funktion. Keine speziellen Präfixe erforderlich.