探索text-decoration-thickness
CSS 属性的from-font
值。本文通过四个演示案例,深入浅出地讲解了该属性值的工作原理及浏览器兼容性。
from-font
值详解MDN 对 from-font
值的定义如下:
如果字体文件包含首选粗细信息,则使用该值。如果字体文件不包含此信息,则行为如同设置了
auto
值一样,浏览器会选择合适的粗细。
因此,只有当字体文件定义了线条粗细时,from-font
值才会生效。否则,浏览器将使用 auto
值,由浏览器自行选择粗细。本文通过几个演示案例,将其与其他值进行了比较。
text-decoration-thickness: auto
第一个演示案例测试了 auto
值在默认字体族下对下划线、上划线和删除线的粗细影响。
结果显示,某些组合(例如,删除线使用波浪线装饰)的可读性较差,但这在某些场景下可能是期望的输出。
text-decoration-thickness: 0px
第二个演示案例测试了细线的表现。
细线在段落或较小文本中效果良好,但在较大文本中,细删除线难以辨认。
此外,实验表明,线条粗细不能低于 1px。即使设置为 0px
,浏览器仍然渲染为 1px 线。
text-decoration-thickness: from-font
与字体粗细第三个演示案例测试了 text-decoration-thickness: from-font
是否随字体粗细变化而改变。左侧设置为 from-font
,右侧设置为 auto
。
结果表明,至少在使用 Roboto 字体族时,from-font
值似乎不会随着文本字体粗细的变化而改变。文本大小或粗细的改变,都不会影响线条粗细。
值得注意的是,Firefox 浏览器对这两个值的线条粗细渲染结果相同,这暗示 Firefox 浏览器可能在 auto
值下实际使用了 from-font
值。
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中文网其他相关文章!