在4个演示中解释了CSS。

探索text-decoration-thickness CSS 属性的from-font值。本文通过四个演示案例，深入浅出地讲解了该属性值的工作原理及浏览器兼容性。

from-font值详解

MDN 对 from-font 值的定义如下：

如果字体文件包含首选粗细信息，则使用该值。如果字体文件不包含此信息，则行为如同设置了 auto 值一样，浏览器会选择合适的粗细。

因此，只有当字体文件定义了线条粗细时，from-font 值才会生效。否则，浏览器将使用 auto 值，由浏览器自行选择粗细。本文通过几个演示案例，将其与其他值进行了比较。

演示 1：text-decoration-thickness: auto

第一个演示案例测试了 auto 值在默认字体族下对下划线、上划线和删除线的粗细影响。

结果显示，某些组合（例如，删除线使用波浪线装饰）的可读性较差，但这在某些场景下可能是期望的输出。

演示 2：text-decoration-thickness: 0px

第二个演示案例测试了细线的表现。

细线在段落或较小文本中效果良好，但在较大文本中，细删除线难以辨认。

此外，实验表明，线条粗细不能低于 1px。即使设置为 0px，浏览器仍然渲染为 1px 线。

演示 3：text-decoration-thickness: from-font 与字体粗细

第三个演示案例测试了 text-decoration-thickness: from-font 是否随字体粗细变化而改变。左侧设置为 from-font，右侧设置为 auto。

结果表明，至少在使用 Roboto 字体族时，from-font 值似乎不会随着文本字体粗细的变化而改变。文本大小或粗细的改变，都不会影响线条粗细。

值得注意的是，Firefox 浏览器对这两个值的线条粗细渲染结果相同，这暗示 Firefox 浏览器可能在 auto 值下实际使用了 from-font 值。

演示 4：text-decoration-thickness: from-font 与字体族

最后一个演示案例测试了 from-font 值在不同字体族下的表现。由于渲染最小值为 1px，因此对段落或较小字体大小的影响不明显。只有在较大字体大小（例如默认的 <p></p> 元素）下，差异才比较细微，需要仔细观察才能发现。同样，删除线在较大文本中仍然过细。字体设计师和开发者在设计和定义字体时，可能需要考虑这个问题。

浏览器支持

大多数现代浏览器都支持 text-decoration-thickness 属性。

是否应该使用 from-font 值？

尽管 from-font 值看起来是个好主意，但我认为现在还不应该使用它。不同浏览器对默认 text-decoration-thickness 值的渲染存在诸多不一致性，因此 from-font 值目前的表现并不理想。也许 from-font 值应该使用百分比或其他相对单位来定义，以便随着字体大小而变化。或者字体设计师认为它不应该那样工作。无论如何，似乎需要更多讨论来确定该属性值的默认行为及其渲染方式。

我在个人网站的文章链接下划线中使用了 from-font 值，我认为效果很好。线条很细微，但仍然传达了交互信息。

期待未来 text-decoration-thickness 属性有更多选项。

以上是在4个演示中解释了CSS。的详细内容。更多信息请关注PHP中文网其他相关文章！