Das CSS aus dem Wert, der in 4 Demos erläutert wurde

探索text-decoration-thickness CSS 属性的from-font值。 In vier Demonstrationsfällen erläutert dieser Artikel das Arbeitsprinzip dieses Eigentumswerts und der Browserkompatibilität auf leicht verständliche Weise.

from-font Wert

MDN 对from-font值的定义如下：

Dieser Wert wird verwendet, wenn die Schriftart Datei bevorzugte Dickeninformationen enthält.如果字体文件不包含此信息，则行为如同设置了auto值一样，浏览器会选择合适的粗细。

Daher wirkt sich der Wert from-font nur dann aus, wenn die Schriftart die Zeilendicke definiert.否则，浏览器将使用auto值，由浏览器自行选择粗细。 Dieser Artikel vergleicht es mit anderen Werten in mehreren Demonstrationsfällen.

演示1： text-decoration-thickness: auto

第一个演示案例测试了auto值在默认字体族下对下划线、上划线和删除线的粗细影响。

Die Ergebnisse zeigen, dass einige Kombinationen (z. B. die Streiche mit welligen Linien dekoriert sind) weniger lesbar, aber dies kann in einigen Szenarien die gewünschte Ausgabe sein.

演示2： text-decoration-thickness: 0px

Der zweite Demonstrationsfall testet die Leistung dünner Linien.

Dünne Linien funktionieren gut in Absätzen oder kleineren Texten, aber in größeren Texten sind dünne Schläge schwer zu identifizieren.

Zusätzlich zeigen Experimente, dass die Dicke der Linie nicht weniger als 1PX betragen kann. Auch wenn der Browser auf 0px eingestellt ist, wird der Browser immer noch als 1PX -Linie.

演示3： text-decoration-thickness: from-font与字体粗细

第三个演示案例测试了text-decoration-thickness: from-font是否随字体粗细变化而改变。 Die linke Seite ist from-font aus und die rechte Seite ist auf auto eingestellt.

结果表明，至少在使用Roboto 字体族时， from-font值似乎不会随着文本字体粗细的变化而改变。 Änderungen der Textgröße oder -dicke beeinflussen die Dicke der Linie nicht.

值得注意的是，Firefox 浏览器对这两个值的线条粗细渲染结果相同，这暗示Firefox 浏览器可能在auto值下实际使用了from-font值。

演示4： text-decoration-thickness: from-font与字体族

Der letzte Demonstrationstfall testet, wie sich from-font unter verschiedenen Schriftfamilien entwickelt. Da das Rendering -Minimum 1PX beträgt, ist die Auswirkung auf Absätze oder kleinere Schriftgröße nicht offensichtlich. Nur in größeren Schriftgrößen (z. B. Standardeinstellung<p> Unter dem Element) ist der Unterschied subtiler und erfordert eine sorgfältige Beobachtung, um zu entdecken. Auch hier ist die Löschlinie in größerem Text immer noch zu dünn. Schriftarten und Entwickler müssen dies möglicherweise beim Entwerfen und Definieren von Schriftarten berücksichtigen.</p> <h3> Browserunterstützung</h3> <p>大多数现代浏览器都支持<code>text-decoration-thickness属性。

是否应该使用from-font值？

尽管from-font值看起来是个好主意，但我认为现在还不应该使用它。不同浏览器对默认text-decoration-thickness值的渲染存在诸多不一致性，因此from-font值目前的表现并不理想。也许from-font值应该使用百分比或其他相对单位来定义，以便随着字体大小而变化。 Oder Schriftsteller -Designer denken, dass es nicht so funktionieren sollte. In jedem Fall scheint es, dass mehr Diskussion erforderlich ist, um das Standardverhalten des Eigenschaftswerts zu bestimmen und wie er ihn macht.

我在个人网站的文章链接下划线中使用了from-font值，我认为效果很好。 Die Zeilen sind subtil, vermitteln aber immer noch die interaktive Nachricht.

期待未来text-decoration-thickness属性有更多选项。

Das obige ist der detaillierte Inhalt vonDas CSS aus dem Wert, der in 4 Demos erläutert wurde. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!