我在做我的 UI 组件降临历 时，偶然发现了 from-font 值，用于 text-decoration-thickness CSS 属性。我对它很好奇，所以做了一些研究，我认为我发现（和学到的）内容既有趣又有分享价值。
关于 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 和 font-weight
接下来，我想看看 text-decoration-thickness: from-font 声明是否会随着字体粗细的变化而变化。在左侧，该值设置为 from-font；在右侧，该值设置为 auto。
from-font 值似乎不遵循文本字体粗细的变化，至少在 Roboto 作为字体系列时没有变化。文本大小或粗细如何设置没有任何区别。如果该值设置为 from-font，则线条粗细相同。
值得注意的是，Firefox 会为这两个值渲染相同的线条粗细，所以我的猜测是 Firefox 实际上使用 from-font 值来表示 auto 值。
演示 4：text-decoration-thickness: from-font 和 font-family
在这个最终演示中，我想看看 from-font 值如何与不同的字体系列一起使用。它不会影响段落或较小的字体大小，因为它会渲染最小值 1px。对于较大的字体大小（例如默认 <h1> 元素），区别是可见的，但只有当你仔细观察时才能看到。另外，删除线在较大的文本上再次太细了。这是字体设计师和开发人员在设计和定义字体时需要考虑的因素。
浏览器支持
你当然可以立即使用 text-decoration-thickness 属性，因为大多数现代浏览器都支持此属性。
所以，你应该使用它吗？
虽然 from-font 值看起来像个好主意，但我认为现在不应该使用它。浏览器之间对默认 text-decoration-thickness 值存在太多不一致之处（Šime Vidas 对此进行了深入的介绍），因此 from-font 值仍然不能很好地工作并不奇怪。也许应该以百分比或其他相对单位来定义 from-font 值，以便它随着字体大小而变化。也许字体设计师认为它不应该那样工作。无论哪种方式，似乎都需要更多讨论来确定属性值的默认行为以及它是如何渲染的。
我在个人网站上使用 from-font 值来实现链接下划线，在文章中，我认为效果很好。线条很细微，但仍然可以传达交互性。
我期待未来看到 text-decoration-thickness 有更多选项。