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 März 2022.
Die text-emphasis CSS-Eigenschaft wendet Betonungszeichen auf Text an (ausgenommen Leerzeichen und Steuerzeichen). Sie ist eine Kurzform 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 hingegen wird vererbt, was bedeutet, dass es möglich ist, Betonungszeichen für Nachfahren zu ändern.
Die Größe des Betonungssymbols, ähnlich wie bei Rubysymbolen, beträgt etwa 50% der Schriftgröße, und text-emphasis kann die Linienhöhe beeinflussen, wenn der aktuelle Zeilenabstand nicht ausreichend für die Zeichen ist.
Hinweis:
text-emphasis setzt den Wert von text-emphasis-position nicht zurück. Das liegt daran, dass, wenn der Stil und die Farbe der Betonungszeichen in einem Text variieren können, es äußerst unwahrscheinlich ist, dass sich deren Position ändern wird. In den sehr seltenen Fällen, in denen dies nötig ist, verwenden Sie die Eigenschaft text-emphasis-position.
Einzelne Eigenschaften
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:
Syntax
/* Initial value */
text-emphasis: none; /* No emphasis marks */
/* <string> value */
text-emphasis: "x";
text-emphasis: "点";
text-emphasis: "\25B2";
text-emphasis: "*" #555555;
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 #555555;
/* 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 wird mit einer Vollfarbe ausgefüllt. Wenn weder
fillednochopenangegeben sind, ist dies der Standard. open-
Die Form ist hohl.
dot-
Zeigt kleine Kreise als Zeichen an. Der gefüllte Punkt ist
'•'(U+2022), und der offene Punkt ist'◦'(U+25E6). circle-
Zeigt große Kreise als Zeichen an. Der gefüllte Kreis ist
'●'(U+25CF), und der offene Kreis ist'○'(U+25CB). Dies ist die Standardform in horizontalen Schreibmodi, wenn keine andere Form angegeben ist. double-circle-
Zeigt Doppelkreise als Zeichen an. Der gefüllte Doppelkreis ist
'◉'(U+25C9), und der offene Doppelkreis ist'◎'(U+25CE). triangle-
Zeigt Dreiecke als Zeichen an. Das gefüllte Dreieck ist
'▲'(U+25B2), und das offene Dreieck ist'△'(U+25B3). sesame-
Zeigt Sesamzeichen an. Der gefüllte Sesam ist
'﹅'(U+FE45), und der offene Sesam ist'﹆'(U+FE46). Dies ist die Standardform in vertikalen Schreibmodi, wenn keine andere Form angegeben ist. <string>-
Zeigt die angegebene Zeichenkette als Zeichen an. Autoren sollten nicht mehr als ein Zeichen in
<string>angeben. Der benutzerseitige Agent (UA) kann Zeichenfolgen, die aus mehr als einem Grapheme-Cluster bestehen, kürzen oder ignorieren. <color>-
Definiert die Farbe des Zeichens. Wenn keine Farbe angegeben ist, wird
currentColorals Standardwert verwendet.
Formale Definition
| Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Ja |
| Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
| Animationstyp | wie die jeweiligen Kurzschreibweisen:
|
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, die zur Betonung jedes Zeichens verwendet werden.
CSS
h2 {
text-emphasis: triangle #dd5555;
}
HTML
<h2>This is important!</h2>
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Text Decoration Module Level 3 # text-emphasis-property |
Browser-Kompatibilität
Siehe auch
- Die Langformen der Eigenschaften
text-emphasis-style,text-emphasis-color. - Die
text-emphasis-position-Eigenschaft, die es ermöglicht, die Position der Betonungszeichen zu definieren.