关于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 and 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在未来看到更多的选择。
