text-emphasis CSS-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2022 browserübergreifend verfügbar.
Die text-emphasis CSS-Eigenschaft wendet Betonungszeichen auf Text an (außer auf 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 stark von text-decoration. Die text-decoration-Eigenschaft wird nicht vererbt, und die angegebene Dekoration wird über das ganze 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 Ruby-Symbole, beträgt etwa 50% der Schriftgröße, und text-emphasis kann die Zeilenhöhe beeinflussen, wenn das aktuelle Führungsmaß nicht ausreichend für die Zeichen ist.
Hinweis:
text-emphasis setzt den Wert von text-emphasis-position nicht zurück. Dies liegt daran, dass, selbst wenn der Stil und die Farbe von Betonungszeichen in einem Text variieren können, es extrem unwahrscheinlich ist, dass sich deren Position ändern wird. In den sehr seltenen Fällen, in denen dies erforderlich ist, verwenden Sie die Eigenschaft text-emphasis-position.
Bestandteileigenschaften
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 ist mit einer Vollfarbe gefüllt. Wenn weder
fillednochopenvorhanden ist, ist dies der Standardwert. 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 Schreibrichtungen, wenn keine andere Form angegeben ist. double-circle-
Zeigt doppelte Kreise 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 Sesamene als Zeichen an. Der gefüllte Sesam ist
'﹅'(U+FE45), und der offene Sesam ist'﹆'(U+FE46). Dies ist die Standardform in vertikalen Schreibrichtungen, wenn keine andere Form angegeben ist. <string>-
Zeigt die angegebene Zeichenkette als Zeichen an. Autoren sollten nicht mehr als ein Zeichen in
<string>angeben. Die UA kann Zeichenfolgen, die aus mehr als einem Graphem-Cluster bestehen, abschneiden oder ignorieren. <color>-
Definiert die Farbe des Zeichens. Wenn keine Farbe vorhanden ist, wird
currentColorals Standard 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, bei der Dreiecke verwendet werden, um jedes Zeichen zu betonen.
CSS
h2 {
text-emphasis: triangle #dd5555;
}
HTML
<h2>This is important!</h2>
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Text Decoration Module Level 3 # text-emphasis-property |
Browser-Kompatibilität
Siehe auch
- Die Langform-Eigenschaften
text-emphasis-style,text-emphasis-color. - Die Eigenschaft
text-emphasis-position, die es ermöglicht, die Position der Betonungszeichen zu definieren.