文本装饰线厚度(粗细)

翻译不完整。 请帮助我们翻译这篇文章!

CSS text-decoration-thickness  属性用来设置元素中文本所使用的装饰线如 line-through, underline, or overline 的厚度或者宽度

语法

/* Single keyword */
text-decoration-thickness: auto;
text-decoration-thickness: from-font;

/* length */
text-decoration-thickness: 0.1em;
text-decoration-thickness: 3px;

/* Global values */
text-decoration-thickness: inherit;
text-decoration-thickness: initial;
text-decoration-thickness: unset;

auto
浏览器为文本装饰线选择合适的宽度.
from-font
如果字体文件中包含了首选的厚度值则会使用字体文件的这个厚度值. 如果字体文件中没有设置,则效果和设置为auto一样,由浏览器选择一个合适的厚度值.
<length>
length 类型指定装饰线厚度, 这样会覆盖掉字体文件指定的或浏览器默认的值.

语法形式

该属性的语法尚未添加

示例

<p class="longhand">Here's some text with a 2px red underline.</p>
<p class="under-and-over">This one has under and overline.</p>
<p class="shorthand">This will have a 1px blue underline if shorthand is supported.</p>
.longhand { 
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 2px;
}

.under-and-over {
  text-decoration-line: underline overline;
  text-decoration-style: solid;
  text-decoration-color: orange;
  text-decoration-thickness: 0.2rem;
}

.shorthand {
  text-decoration: underline solid blue 1px;
}

规范

规范 状态值 注解
CSS Text Decoration Module Level 4
text-decoration-width
Working Draft Initial definition.

Note: The property used to be called text-decoration-width, but was updated in 2019 to text-decoration-thickness.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
text-decoration-thicknessChrome No support NoEdge No support NoFirefox Full support 70
Full support 70
Full support 69
Alternate Name Disabled
Alternate Name Uses the non-standard name: text-decoration-width
Disabled From version 69: this feature is behind the layout.css.text-decoration-width.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari Full support 12.1WebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS Full support 12.2Samsung Internet Android No support No
percentage valuesChrome No support NoEdge No support NoFirefox Full support 74IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.

参见