Ich habe an meinen Advent of UI Components gearbeitet und bin auf den from-font-Wert für die CSS-Eigenschaft text-decoration-thickness gestoßen. Ich war neugierig darauf, habe ein wenig recherchiert und denke, dass das, was ich gefunden (und gelernt) habe, sowohl interessant als auch teilenswert ist.
Über den from-font-Wert
So definiert MDN den from-font-Wert
Wenn die Schriftdatei Informationen über eine bevorzugte Dicke enthält, verwenden Sie diesen Wert. Wenn die Schriftdatei diese Informationen nicht enthält, verhalten Sie sich so, als wäre
autoeingestellt, und der Browser wählt eine geeignete Dicke.
Der Wert from-font wird also nur verwendet, wenn die Schriftdatei die Definition für die Dicke der Linie enthält. Andernfalls verwenden Browser den Wert auto, der dem Browser mitteilt, die Dicke zu wählen. Ich wollte herausfinden, wie das funktioniert, und habe ein paar Demos erstellt, die ihn mit den anderen Werten vergleichen.
Demo 1: text-decoration-thickness: auto
In der ersten Demo wollte ich sehen, wie der Wert auto für die Dicke mit Unter-, Über- und Durchstreichungen für die Standard-Schriftfamilie funktioniert.
Ich habe hier nichts besonders Interessantes gefunden, außer dass einige Kombinationen bei durchgestrichenem Text nicht sehr gut funktionieren (wenn Sie mich fragen). Zum Beispiel ist die Verwendung einer wellenförmigen Dekoration mit Durchstreichung nicht lesbar, aber das könnte in manchen Szenarien die gewünschte Ausgabe sein, denke ich.
Demo 2: text-decoration-thickness: 0px
In der zweiten Demo wollte ich sehen, wie der Text mit dünnen Linien funktioniert.
Die Linien funktionieren gut mit Absätzen oder kleinerem Text, aber die dünne durchgestrichene Linie funktioniert bei großem Text nicht sehr gut, da die durchgestrichene Linie schwer zu erkennen ist.
Ich habe auch gelernt, dass man die Liniendicke nicht unter 1px einstellen kann. In der Demo ist die Liniendicke auf 0px eingestellt, aber der Browser rendert trotzdem eine 1px dicke Linie.
Demo 3: text-decoration-thickness: from-font und font-weight
Als Nächstes wollte ich sehen, ob sich die Deklaration text-decoration-thickness: from-font mit dem Schriftschnitt ändert. Links ist der Wert auf from-font gesetzt; rechts ist der Wert auf auto gesetzt.
Der Wert from-font scheint Änderungen am Schriftschnitt des Textes nicht zu folgen, zumindest nicht, wenn Roboto die Schriftfamilie ist. Es gibt keinen Unterschied, wie groß oder fett der Text eingestellt ist. Die Liniendicke ist gleich, wenn der Wert auf from-font gesetzt ist.
Es ist erwähnenswert, dass Firefox die Liniendicke für beide Werte gleich rendert, daher vermute ich, dass Firefox tatsächlich den Wert from-font für den Wert auto verwendet.
Demo 4: text-decoration-thickness: from-font und font-family
In dieser letzten Demo wollte ich sehen, wie der Wert from-font mit verschiedenen Schriftfamilien funktioniert. Er hat keinen Einfluss auf Absätze oder kleinere Schriftgrößen, da er den kleinsten Wert, 1px, rendert. Der Unterschied ist bei größeren Schriftgrößen sichtbar, wie z. B. bei Standard-<h1>-Elementen, aber nur, wenn man sehr genau hinsieht. Außerdem ist die durchgestrichene Linie bei größerem Text wieder zu dünn. Dies ist etwas, das Schriftgestalter und Entwickler bei der Gestaltung und Definition von Schriften berücksichtigen könnten.
Browser-Unterstützung
Sie können die Eigenschaft text-decoration-thickness heute mit ziemlicher Sicherheit verwenden, da die meisten modernen Browser diese Eigenschaft unterstützen.
Sollten Sie ihn also verwenden?
Obwohl der Wert from-font *scheint* eine gute Idee zu sein, denke ich nicht, dass er schon verwendet werden sollte. Es gibt zu viele Inkonsistenzen mit dem Standardwert text-decoration-thickness über die Browser hinweg (was Šime Vidas ausführlich behandelt hat), daher ist es keine Überraschung, dass der Wert from-font immer noch nicht gut funktioniert. Vielleicht sollte der Wert from-font in Prozent oder einer anderen relativen Einheit definiert werden, damit er sich mit der Schriftgröße ändert. Vielleicht sind Schriftgestalter der Meinung, dass er nicht so funktionieren sollte. So oder so scheint weitere Diskussion erforderlich zu sein, um das Standardverhalten des Eigenschaftswerts und seine Darstellung zu klären.
Ich verwende den Wert from-font auf meiner persönlichen Website für die Link-Unterstreichungen in den Artikeln, und ich denke, er funktioniert großartig. Die Linie ist dezent, aber sie kommuniziert die Interaktion trotzdem.
Ich freue mich darauf, in Zukunft mehr Optionen für text-decoration-thickness zu sehen.