text-emphasis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Die text-emphasis CSS Eigenschaft wendet Betonungszeichen auf Text an (außer auf Leerzeichen und Steuerzeichen). Es handelt sich um eine Kurznotation für text-emphasis-style und text-emphasis-color.

Probieren Sie es aus

text-emphasis: none;

text-emphasis: filled red;

text-emphasis: "x";

text-emphasis: filled double-circle #ffb703;

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

p {
  font: 1.5em sans-serif;
}

Die text-emphasis-Eigenschaft unterscheidet sich erheblich von text-decoration. Die text-decoration-Eigenschaft wird nicht vererbt, und die angegebene Dekoration wird auf das gesamte Element angewendet. text-emphasis wird jedoch vererbt, was bedeutet, dass es möglich ist, Betonungszeichen für Nachfahren zu ändern.

Die Größe des Betonungssymbols ist ähnlich wie bei Ruby-Symbolen etwa 50 % der Schriftgröße, und text-emphasis kann die Zeilenhöhe beeinflussen, wenn der aktuelle Zeilenabstand nicht für die Zeichen ausreicht.

Note: text-emphasis setzt den Wert von text-emphasis-position nicht zurück. Dies liegt daran, dass es äußerst unwahrscheinlich ist, dass sich die Position von Betonungszeichen ändert, selbst wenn Stil und Farbe variieren. In den sehr seltenen Fällen, in denen dies erforderlich ist, verwenden Sie die Eigenschaft text-emphasis-position.

Bestehende Eigenschaften

Diese Eigenschaft ist eine Kurznotation für die folgenden CSS-Eigenschaften:

Syntax

css

/* Initial value */
text-emphasis: none; /* No emphasis marks */

/* <string> value */
text-emphasis: "x";
text-emphasis: "点";
text-emphasis: "\25B2";
text-emphasis: "*" #555;
text-emphasis: "foo"; /* Should NOT use. It may be computed to or rendered as 'f' only */

/* Keywords value */
text-emphasis: filled;
text-emphasis: open;
text-emphasis: filled sesame;
text-emphasis: open sesame;

/* Keywords value combined with a color */
text-emphasis: filled sesame #555;

/* Global values */
text-emphasis: inherit;
text-emphasis: initial;
text-emphasis: revert;
text-emphasis: revert-layer;
text-emphasis: unset;

Werte

none: Keine Betonungszeichen.
filled: Die Form ist mit einer Vollfarbe gefüllt. Wenn weder filled noch open vorhanden ist, ist dies der Standard.
open: Die Form ist hohl.
dot: Kleine Kreise als Markierung anzeigen. Der gefüllte Punkt ist '•' (U+2022), und der offene Punkt ist '◦' (U+25E6).
circle: Große Kreise als Markierung anzeigen. Der gefüllte Kreis ist '●' (U+25CF), und der offene Kreis ist '○' (U+25CB). Dies ist die Standardform in horizontalen Schreibrichtungen, wenn keine andere Form angegeben ist.
double-circle: Doppelte Kreise als Markierung anzeigen. Der gefüllte Doppelkreis ist '◉' (U+25C9), und der offene Doppelkreis ist '◎' (U+25CE).
triangle: Dreiecke als Markierung anzeigen. Das gefüllte Dreieck ist '▲' (U+25B2), und das offene Dreieck ist '△' (U+25B3).
sesame: Sesamzeichen als Markierung anzeigen. Das gefüllte Sesamzeichen ist '﹅' (U+FE45), und das offene Sesamzeichen ist '﹆' (U+FE46). Dies ist die Standardform in vertikalen Schreibrichtungen, wenn keine andere Form angegeben ist.
<string>: Die angegebene Zeichenkette als Markierung anzeigen. Autoren sollten nicht mehr als ein Zeichen in <string> angeben. Der UA kann Zeichenketten, die aus mehr als einem Graphem-Cluster bestehen, abschneiden oder ignorieren.
<color>: Definiert die Farbe des Zeichens. Wenn keine Farbe angegeben ist, wird currentcolor als Standard verwendet.

Formale Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `text-emphasis-style`: `none` `text-emphasis-color`: `currentcolor`
Anwendbar auf	alle Elemente
Vererbt	Ja
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `text-emphasis-style`: wie angegeben `text-emphasis-color`: berechnete Farbe
Animationstyp	wie die jeweiligen Kurzschreibweisen: `text-emphasis-color`: Farbe `text-emphasis-style`: diskret

Formale Syntax

text-emphasis = 
  <'text-emphasis-style'>  ||
  <'text-emphasis-color'>  

<text-emphasis-style> = 
  none                                                |
  [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ]  |
  <string>                                            

<text-emphasis-color> = 
  <color>

Beispiele

Eine Überschrift mit Betonungsform und Farbe

Dieses Beispiel zeichnet eine Überschrift mit Dreiecken, um jedes Zeichen zu betonen.

CSS

css

h2 {
  text-emphasis: triangle #d55;
}

HTML

html

<h2>This is important!</h2>

Ergebnis

Spezifikationen

Specification
CSS Text Decoration Module Level 3 # text-emphasis-property

Browser-Kompatibilität

Siehe auch

Die Langnotateigenschaften text-emphasis-style, text-emphasis-color.
Die text-emphasis-position-Eigenschaft, die erlaubt, die Position der Betonungszeichen zu definieren.