Implementierungscode zur Verwendung von CSS-Texthervorhebung zum Hervorheben von Text

1. Einleitung

Wenn Sie früher einen bestimmten Teil des Textes hervorheben wollten, haben Sie dies normalerweise getan, indem Sie ihn fett markiert oder eine helle Farbe verwendet haben. Jetzt gibt es eine neue Option, nämlich die Verwendung text-emphasis zur Hervorhebungsverzierung.

Es gibt 4 CSS-Eigenschaften in text-emphasis , nämlich:

• Texthervorhebung
• Texthervorhebungsfarbe
• Texthervorhebungsstil
• Texthervorhebungsposition

Unter ihnen ist text-emphasis die Abkürzung der beiden CSS-Eigenschaften text-emphasis-color und text-emphasis-style Beachten Sie, dass text-emphasis-position text-emphasis-position nicht enthalten ist, da sie unabhängig ist.

2. Einzelheiten

1. Texthervorhebungsfarbe

text-emphasis-color und der Anfangswert ist die Farbe des aktuellen Textes.

2. Texthervorhebungsstil

Es gibt drei Haupttypen von Syntax text-emphasis-style :

Texthervorhebungsstil: keiner
Texthervorhebungsstil: [ gefüllt | offen ] || [ Punkt | Kreis | Doppelkreis | Dreieck | Sesam ]
Texthervorhebungsstil: <Zeichenfolge>

In:

text-emphasis-style:none ist die Standarddeklaration und bedeutet, dass keine Hervorhebungsdekoration erfolgt.

text-emphasis-style:<string> bedeutet, dass ein beliebiges einzelnes Zeichen als Hervorhebungsdekorator verwendet wird. Beispielsweise mit dem Herz-Zeichen:

Baby, <span class="emphasis">habe dich lieb</span>, <span class="emphasis">Herz</span>!

.Schwerpunkt {
    -webkit-text-emphasis-style: „❤“;
    Texthervorhebungsstil: „❤“;
}

Der Effekt ist in der folgenden Abbildung dargestellt. Sie können sehen, dass über dem entsprechenden Text ein Herzzeichen angezeigt wird (da die Emoji-Schriftart angewendet wird, wird das Emoji-Zeichen angezeigt).

Hier sind ein paar Einzelheiten, die wir mit Ihnen teilen möchten:

Die Schriftgröße des angezeigten Hervorhebungsdekorators ist halb so groß wie die Schriftgröße des Haupttextinhalts. Wenn der Text beispielsweise 16px groß ist, beträgt die Größe des Hervorhebungszeichens darüber 8px . Vermeiden Sie daher bei nicht sehr großen Schriftgrößen möglichst die Verwendung von Zeichen mit komplexen Formen und kleinen Zeichenflächen, wie etwa Sternchen „*“ und Rautezeichen „#“, da diese auf normalen Anzeigegeräten zu einer Kugel zusammengeschrumpft werden und die Benutzer nicht erkennen können, um welche Zeichen es sich handelt. Wenn die Zeilenhöhe nicht sehr hoch ist, erhöht der Hervorhebungsdekorator automatisch die Höhe der aktuellen Zeile. Der Abstand zwischen dem Hervorhebungsdekorator und dem Haupttext kann nicht durch Festlegen von Eigenschaften wie Zeilenhöhe angepasst werden. Die Größe des Abstands wird hauptsächlich durch die Schriftart bestimmt.

Wenn mehrere Zeichen angegeben werden, wird nur das erste Zeichen als Hervorhebungsmodifikator verwendet. Zum Beispiel:

Texthervorhebungsstil: „CSS New World“;

ist gleichbedeutend mit:

Texthervorhebungsstil: „C“;

Schauen wir uns zum Abschluss die integrierten dekorativen Zeicheneffekte des text-emphasis-style an: dot , circle , double-circle , triangle und sesame .

Jeder Dekorator hat zwei Arten von Zeichen: gefüllt und hohl, die durch die beiden Schlüsselwörter filled und open bestimmt werden.

Zum Beispiel:

/* Durchgezogener Punkt */
Texthervorhebung: ausgefüllter Punkt;
/*Hohler Punkt*/
Texthervorhebung: offener Punkt;

Da integrierte Zeichen standardmäßig ausgefüllt sind, hat text-emphasis:filled dot dieselbe Wirkung wie text-emphasis:dot .

Wenn text-emphasis-style nur filled oder open ist, wird als Hervorhebungsdekorator dot verwendet. Zum Beispiel:

/* Entspricht Texthervorhebung: ausgefüllter Punkt */
Texthervorhebung: ausgefüllt;
/* Entspricht Texthervorhebung: offener Punkt */
Texthervorhebung: offen;

Was die spezifischen Effekte jedes dekorativen Symbols betrifft, habe ich (Zhang Xinxu) speziell für Sie eine Tabelle erstellt. Einzelheiten finden Sie in der folgenden Tabelle.

Die Schriftgröße jedes Hervorhebungsdekorators wird stark von der Schriftart beeinflusst. Sie können je nach tatsächlichem Szenario den geeigneten Hervorhebungsdekorator verwenden.

3. Text-Hervorhebungsposition

text-emphasis-position wird verwendet, um die Position des Hervorhebungsdekorators anzugeben. Die Standardposition ist über dem Haupttext. Wir können angeben, dass der Hervorhebungsdekorator unter dem Haupttext steht, oder wir können angeben, ob der Hervorhebungsdekorator auf der linken oder rechten Seite steht, wenn der Text vertikal angeordnet ist.

Die Syntax lautet wie folgt:

Texthervorhebungsposition: [ über | unter ] und [ rechts | links ]

Gebrauchsanweisung:

Texthervorhebungsposition: oben links;
Texthervorhebungsposition: unten rechts;
Texthervorhebungsposition: unten links;

Texthervorhebungsposition: links;
Texthervorhebungsposition: direkt darunter;
Texthervorhebungsposition: links unten;

Der Anfangswert der text-emphasis-position liegt over right . right Positionierung erscheint, wenn der Text vertikal angeordnet ist. Wenn beispielsweise writing-mode:vertical-rl festgelegt ist, können Sie den Hervorhebungsdekorator auf der rechten Seite sehen, wie in der folgenden Abbildung dargestellt.

text-emphasis-position wird in chinesischen Szenarien immer noch sehr häufig verwendet, da Chinesen dazu neigen, Zeichen, die eine Betonung anzeigen, unten anzuordnen, was sich von ostasiatischen Sprachen wie Japanisch und Koreanisch unterscheidet.

Um chinesische Inhalte hervorzuheben, müssen Sie daher zusätzlich zum Festlegen des Hervorhebungsdekorators auch die Position des Hervorhebungsdekorators nach unten festlegen, zum Beispiel:

.chinese-emphasis {
    -webkit-text-emphasis: Punkt;
    Texthervorhebung: Punkt;
    -webkit-text-emphasis-position: unten rechts;
    Texthervorhebungsposition: unten rechts;
}

Hier ist ein kleines Detail. Im Chrome-Browser kann text-emphasis-position nur den vertikalen Positionswert festlegen, ohne den horizontalen Positionswert festzulegen. Beispielsweise kann die folgende Syntax auch vom Chrome-Browser erkannt werden:

-webkit-text-emphasis-position: unter;

Beachten Sie jedoch, dass dieser Ansatz des Chrome-Browsers tatsächlich falsch ist und nicht der Spezifikationsbeschreibung entspricht. Die Spezifikation erfordert, dass text-emphasis-position sowohl horizontale als auch vertikale Positionen enthalten muss. Daher wird empfohlen, beide Werte gleichzeitig festzulegen.

-webkit-text-emphasis-position: unten rechts;

4. Textbetonung

text-emphasis ist die Abkürzung der beiden CSS-Eigenschaften text-emphasis-color und text-emphasis-style . Hier ist eine Anleitung zur Verwendung:

Texthervorhebung: Kreis tiefes Himmelblau;

text-emphasis ist syntaktisch und semantisch relativ einfach gehalten und verbirgt keine Details.

Erwähnenswert ist lediglich, dass die text-emphasis ein vererbtes Attribut ist. Das heißt, wenn das übergeordnete Element den Hervorhebungseffekt festlegt, wenden die untergeordneten Elemente ihn ebenfalls an. Dies unterscheidet sich völlig vom text-decoration , text-decoration nicht vererbt wird.

Ein weiterer kleiner Unterschied besteht darin, dass text-emphasis die Höhe beeinflusst, die der Text einnimmt, während dies bei text-decoration nicht der Fall ist.

3. Zusammenfassung

Ich habe die Projekte überprüft, mit denen ich zu tun hatte, und Stellen gefunden, an denen text-emphasis verwendet wurde, z. B. Text, der in JS-APIs oder technischen Dokumenten hervorgehoben werden muss, sowie externe Hilfedokumente für Unternehmensprodukte. Für die Anzeige normaler Inhalte scheint jedoch kein solcher Bedarf zu bestehen.

Kurz gesagt bietet uns die CSS-Eigenschaft „ text-emphasis eine neue Möglichkeit, Textinhalte hervorzuheben.

Zum Abschluss zeigen wir die Browserkompatibilität text-emphasis -Attributs wie unten dargestellt:

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von CSS-Texthervorhebung zum Hervorheben von Text. Weitere relevante Inhalte zur Textdekoration mit CSS-Texthervorhebung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!