4つのデモで説明されているフォントからのCSS値

探索text-decoration-thickness CSS 属性的from-font值。 4つのデモのケースを通じて、この記事では、このプロパティ値とブラウザの互換性の実用的な原則を理解しやすい方法で説明しています。

from-font詳細な説明

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

この値は、フォントファイルに優先厚さ情報が含まれている場合に使用されます。如果字体文件不包含此信息，则行为如同设置了auto值一样，浏览器会选择合适的粗细。

因此，只有当字体文件定义了线条粗细时， from-font值才会生效。否则，浏览器将使用auto值，由浏览器自行选择粗细。この記事では、いくつかのデモンストレーションケースを通じて他の値と比較します。

デモ1： text-decoration-thickness: auto

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

結果は、いくつかの組み合わせ（たとえば、ストリケスルーが波状の線で装飾されている）が読みやすくないことを示していますが、これはいくつかのシナリオで望ましい出力である可能性があります。

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

2番目のデモンストレーションケースでは、細い線のパフォーマンスをテストします。

細い線は、パラグラフまたは小さなテキストではうまく機能しますが、より大きなテキストでは、薄いストリケスルーを識別することは困難です。

さらに、実験では、ラインの厚さが1pxを超えることはできないことが示されています。即使设置为0px ，浏览器仍然渲染为1px 线。

デモ3： text-decoration-thickness: from-fontとフォントの厚さ

3番目のデモンストレーションはtext-decoration-thickness: from-fontフォントの厚さで変化するかどうかをテストします。左側はfrom-font設定され、右側はautoに設定されています。

结果表明，至少在使用Roboto 字体族时， from-font值似乎不会随着文本字体粗细的变化而改变。テキストのサイズや厚さの変化は、線の厚さに影響しません。

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

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

最后一个演示案例测试了from-font值在不同字体族下的表现。レンダリングの最小値は1pxであるため、パラグラフまたは小さいフォントサイズへの影響は明らかではありません。より大きなフォントサイズのみ（たとえば、デフォルト<p>要素の下で）、違いはより微妙であり、発見するには慎重な観察が必要です。繰り返しますが、削除行は、大きなテキストではまだ薄すぎます。フォントデザイナーと開発者は、フォントを設計および定義する際にこれを考慮する必要がある場合があります。</p> <h3>ブラウザのサポート</h3> <p>大多数现代浏览器都支持<code>text-decoration-thickness属性。

是否应该使用from-font值？

from-font価値は良い考えのように思えますが、まだ使用すべきではないと思います。不同浏览器对默认text-decoration-thickness值的渲染存在诸多不一致性，因此from-font值目前的表现并不理想。也许from-font值应该使用百分比或其他相对单位来定义，以便随着字体大小而变化。または、フォントデザイナーは、そのように機能するべきではないと考えています。いずれにせよ、プロパティ値のデフォルトの動作とそれがどのようにそれをレンダリングするかを決定するには、より多くの議論が必要であるようです。

我在个人网站的文章链接下划线中使用了from-font值，我认为效果很好。線は微妙ですが、インタラクティブなメッセージを伝えています。

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

以上が4つのデモで説明されているフォントからのCSS値の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。