The CSS from-font Value Explained in 4 Demos

Explore the from-font value of text-decoration-thickness CSS property. Through four demonstration cases, this article explains the working principle of this property value and browser compatibility in an easy-to-understand manner.

from-font value detailed explanation

MDN defines the value from-font as follows:

This value is used if the font file contains preferred thickness information. If the font file does not contain this information, the behavior is like setting auto value and the browser will select the appropriate thickness.

Therefore, the from-font value will only take effect when the font file defines the line thickness. Otherwise, the browser will use the auto value and the browser will select the thickness by itself. This article compares it with other values ​​through several demonstration cases.

Demo 1: text-decoration-thickness: auto

The first demonstration case tests the effect of auto values ​​on underscores, overscores, and strikethroughs under the default font family.

The results show that some combinations (e.g., the strikethrough is decorated with wavy lines) are less readable, but this may be the desired output in some scenarios.

Demo 2: text-decoration-thickness: 0px

The second demonstration case tests the performance of thin lines.

Thin lines work well in paragraphs or smaller texts, but in larger texts, thin strikethroughs are difficult to identify.

In addition, experiments show that the thickness of the line cannot be less than 1px. Even if set to 0px , the browser still renders as a 1px line.

Demo 3: text-decoration-thickness: from-font and font thickness

The third demonstration tests whether text-decoration-thickness: from-font changes with the font thickness. The left side is set to from-font and the right side is set to auto .

The results show that at least when using the Roboto font family, from-font value does not seem to change with the text font thickness. Changes in text size or thickness will not affect the thickness of the line.

It is worth noting that the Firefox browser renders the line thickness of these two values ​​the same, which implies that the Firefox browser may actually use from-font value under auto value.

Demo 4: text-decoration-thickness: from-font and font family

The last demonstration case tests how from-font value performs under different font families. Since the rendering minimum is 1px, the effect on paragraphs or smaller font size is not obvious. Only in larger font sizes (for example, default<p> Under the element), the difference is more subtle and requires careful observation to discover. Again, the delete line is still too thin in larger text. Font designers and developers may need to consider this when designing and defining fonts.</p> <h3> Browser support</h3> <p> Most modern browsers support <code>text-decoration-thickness attribute.

Should from-font value be used?

Although the from-font value seems like a good idea, I don't think it should be used yet. Different browsers have many inconsistencies in rendering the default text-decoration-thickness value, so the current performance of from-font value is not ideal. Perhaps the from-font value should be defined using percentages or other relative units so that it changes with font size. Or font designers think it shouldn't work that way. In any case, it seems that more discussion is needed to determine the default behavior of the property value and how it renders it.

I used the from-font value in the article link underline of my personal website and I think it works very well. The lines are subtle, but still convey the interactive message.

Looking forward to the future text-decoration-thickness attribute with more options.

The above is the detailed content of The CSS from-font Value Explained in 4 Demos. For more information, please follow other related articles on the PHP Chinese website!