文本装饰线厚度(粗细)

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

CSS 属性 text-decoration-thickness 用于设置元素中文本所使用的装饰线(如 line-through、underline 或 overline)的笔触厚度。

语法

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

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

/* percentage */
text-decoration-thickness: 10%;

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

auto
由浏览器为文本装饰线选择合适的厚度。
from-font
如果字体文件中包含了首选的厚度值,则使用字体文件的厚度值。如果字体文件中没有包含首选的厚度值,则效果和设置为 auto 一样,由浏览器选择合适的厚度值。
<length>
将文本装饰线的厚度设置为一个 length 类型的值,覆盖掉字体文件建议的值或浏览器默认的值。
<percentage>
Specifies the thickness of the text decoration line as a percentage of 1em in the current font. A percentage inherits as a relative value, and so therefore scales with changes in the font. The browser must use a minimum of 1 device pixel. For a given application of this property, the thickness is constant across the whole box it is applied to, even if there are child elements with a different font size.

Formal definition

Value not found in DB!

Formal syntax

该属性的语法尚未添加

示例

Varying thickness

HTML

<p class="thin">Here's some text with a 1px red underline.</p>
<p class="thick">This one has a 5px red underline.</p>
<p class="shorthand">This uses the equivalent shorthand.</p>

CSS

.thin { 
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 1px;
}

.thick {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 5px;
}

.shorthand {
  text-decoration: underline solid red 5px;
}

Results

规范

Specification Status Comment
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.

相关链接